如何使用react-hook-form从后端数据中预填充选择标签选项？

Question

您如何使用react-hook-form将来自后端的数据预填充到select标签中。使用文本输入字段非常简单，但不适用于select标签。

function App(){

   const [dataFromDB,setDataFromDB] = useState(null);

    useEffec(()=>{
       /* fetchdata here */
    },[]);
    
    return (
        <FormContainer preloadedValues={dataFromDB} />
    )

}

这是一个简单的表单，具有2个输入和一个提交按钮，该表单有效：

import {useForm} from "react-hook-form";   

function FormContainer ({preloadedValues}){
    const {register, handleSubmit, errors} = useForm({
        defaultValues: preloadedValues
    });

    const processData = (data)=>{
       // logic to send data back to backend
    }

    <form onSubmit={handleSubmit(processData)}>
        <input name='firstname' ref={register} />
        <input name='lastname' ref={register} />
        <button type='submit'>Submit</button>
    </form>
}

这是带有select标签的，我在这里感到困惑：

const {register, handleSubmit, errors} = useForm({
    defaultValues: preloadedValues
});

const processData = (data)=>{
   // logic to send data back to backend
}

<form onSubmit={handleSubmit(processData)}>
    <select
        name='selectdata'
        ref={register}
    >
     {
        /* do i have to map data here? */
     }
    </select> 
    <button type='submit'>Submit</button>
</form>