Ant Designというよりは、Material UIや React-Selectなどフォーム関連の外部ライブラリを使う時にControllerというものを使う必要があるようです。
最初は以下のように書いてましたが、refを認識しないようで、送信時のdataが空っぽでした。
import { useForm } from "react-hook-form"; import { Form, Input, Button, DatePicker } from "antd"; // 省略 const { register, handleSubmit, errors, reset } = useForm(); // 省略 <Input name="title" ref={register({ required: true })} placeholder="タイトルを入力" /> //省略
Controllerを使い以下のように書き換えました。UIライブラリ側で用意されているoptionはそのままControllerに渡せばいいようです。requiredの書き方がちょっと変わってます。
import { useForm, Controller } from "react-hook-form"; import { Form, Input, Button, DatePicker } from "antd"; // 省略 const { register, handleSubmit, errors, reset, control } = useForm(); // 省略 <Controller as={Input} control={control} name="text" className={styles.inputtext} rules={{ required: "Required" }} // defaultValue="初期値" /> //省略
思わぬところでつまづいてしまいました。