name
功能和key差不多，是一個不能重複的字串
render
一個回傳你要註冊的controlled component的function
react-hook-form會幫你把controlled component整合進去，因此就能使用field、fieldState、formState了
defaultValue
如果會用到reset的話，那要提供dedefaultValue，且注意絕對不要提供undefined

const { handleSubmit, control } = useForm({ 
   ReactSelect: { value: "vanilla", label: "Vanilla" },
});

return (
   <form onSubmit={handleSubmit((data) => console.log(data))}>
       <Controller
          name="ReactSelect"
          control={control}
          render={({ field }) => (
             <ReactSelect
                  isClearable
                  {...field}
                  options={[
                     { value: "apple", label: "Apple" },
                     { value: "strawberry", label: "Strawberry" },
                     { value: "banana", label: "Banana" }
                  ]}
              />
          )}
       />
   </form>
);

useController

和Controller+control一樣用於有controlled component的場景

它接收name、control、defaultValues、rule...等，其中control是來自useForm回傳，通常只在用到FormProvider的場景使用，rule則是用於驗證

並回傳以下幾個東西field、formState、fieldState，field類似於useForm回傳的register，

field.ref則用於連結controlled component和react-hook-form，當handleSubmit觸發時，會進行驗證，然後focus有error的input

至於formState和fieldState與useForm差不多

const {
    field,
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name: 'Name',
    control,
    rules: { required: true },
  });

return (
    <>
        <TextField 
          onChange={field.onChange}
          onBlur={field.onBlur}
          value={field.value}
          name={field.name} // 欄位名，不可重複
          inputRef={field.ref} // ref是用於連結react-hook-form和這個input
        />

        {/ * 等同於上段 * /}
        <TextField 
           {...field}
        />
    </>
  );