Форма React hook - заполнить массив выбора множества параметров

Я пытаюсь использовать react-hook-form для создания меню выбора, из которого можно выбрать несколько вариантов.

У меня есть массив базы данных с записями, которые я хочу использовать для заполнения меню выбора.

В formik я успешно использовал этот асинхронный метод componentDidMount, чтобы получить записи из базы данных и передать их методу select. Я не могу заставить это работать с реагирующими хуками.

state = {
      options: [],
    }

    async componentDidMount() {
        let options = [];
        await fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
        querySnapshot.forEach(function(doc) {
            console.log(doc.id, ' => ', doc.data());
            options.push({
                value: doc.data().title.replace(/( )/g, ''),
                label: doc.data().title + ' - ABS ' + doc.id
            });
            });
        });
        this.setState({
            options
        });
    }

Затем я смог использовать const в моем меню выбора, чтобы получить элементы раскрывающегося меню следующим образом:

options={options}

Я не могу заставить это работать в форме хука реакции, и я пытаюсь научиться useEffect, которые, я думаю, должны заменить этот подход.

Однако я не могу понять, как начать с этого.

Моя текущая форма находится во фрагменте (чтобы я мог продолжать использовать antd в остальной части моего внешнего интерфейса), который имеет:

import React from "react";
import useForm from "react-hook-form";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { StateMachineProvider, createStore } from "little-state-machine";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";
import { fsDB, firebase, settings } from "../../../firebase";

import updateAction from "./updateAction";
import "./styles.css";


createStore({
  data: {}
});


const General = props => {
  const { register, handleSubmit, errors } = useForm();
  const { action } = useStateMachine(updateAction);
  const onSubit = data => {
    action(data);
    props.history.push("./ProposalMethod");
  };

  return (

      <React.Fragment>
        <form onSubmit={handleSubmit(onSubit)}>
          <h2>Part 1: General</h2>
          <label>
            Title
            <input 
              type="text" 
              name="title"  
              placeholder="The title " 
              ref={register({ required: true })} 
            />
          </label>
          {errors.title && <p id="titleError">A title is required</p>}

          <label>
            Subtitle
            <input 
              type="text" 
              name="subtitle"  
              placeholder="An optional subtitle" 
              ref={register} 
            />
          </label>

          <label>Select your fields </label>
          <Select 
            name="field" 
            placeholder="Select" 
            options={options}
          />
          <input type="submit" value="next" />

        </form>
      </React.Fragment>  
  );
}; 

export default withRouter(General);

Кто-нибудь может увидеть, где я ошибаюсь?

Я не могу понять, как заменить componentDidMount чем-то, что работает с формой реакции-хука.