How do I get the date value from react-datepicker to register of the react-hook-form - reactjs

Question

I'm making a registration form with required birthday field using react-datepicker and react-hook-form.
After clicking onSubmit button, all data are logged in the console except birthDate (which is null). How do I get the date value from react-datepicker to register of the react-hook-form?
RegistrationForm interface
export interface RegistrationForm {
username: string;
birthDate: Date;
email: string;
password: string;
passwordConfirm: string;
}
const {register, handleSubmit, formState: {errors}, watch, control } = useForm<RegistrationForm>()
const onSubmit = async (data: RegistrationForm) => {
console.log(data)
}
const [selectedBirthDate, setSelectedBirthDate] = useState<Date>(new Date())
const handleDateChange = (date: Date | null) => {
if(date != null) {
setSelectedBirthDate(date)
}
}
In my Controller tag
<Controller
name={"birthDate"}
control={control}
defaultValue={selectedBirthDate}
render={({field}) => {
return(
<DatePicker
onChange={(date: Date) => handleDateChange(date)}
selected={selectedBirthDate}
placeholderText="Enter your birth date"
/>
)
}}
/>
Username form
<input
type="text"
placeholder="username"
{...register("username", {
required: true,
maxLength: 20,
minLength: 5
})}
/>

Answer 1

You forgot to link your <Controller /> with the <DatePicker /> component. So it is important to use at least value and onChange and pass it to the <DatePicker /> props.
<Controller
name={"birthDate"}
control={control}
defaultValue={new Date()}
render={({ field: { onChange, value } }) => {
return (
<DatePicker
onChange={onChange}
selected={value}
placeholderText="Enter your birth date"
/>
);
}}
/>
If you use RHF you also don't need useState to handle your state changes as RHF will handle those changes for you.
UPDATE
To display an error, you need the errors object, which RHF provides via the formState property. But you need to create a validation rule first: you can choose between rules provided by RHF and custom rules, see here for more info (please don't get confused, you can find the rules in the docs under register, because register and <Controller /> have the same interface for the validation rules).
You can then add the rules using the rules prop from <Controller />. As an example, I have added a validation that checks if the selected date is older than 2 years. For displaying the error i used the <ErrorMessage /> component provided by the package #hookform/error-message, but you could also just check if errors.birthDate exists and show your own custom error message.
const sub2Years = subYears(2);
const isOlderThan2Years = (date) =>
isBefore(sub2Years(new Date()), date) || "Date is not older than 2 years";
<Controller
name={"birthDate"}
control={control}
defaultValue={new Date()}
rules={{ validate: { isOlderThan2Years } }}
render={({ field: { onChange, value } }) => {
return (
<DatePicker
onChange={onChange}
selected={value}
placeholderText="Enter your birth date"
/>
);
}}
/>
<ErrorMessage
errors={errors}
name="birthDate"
render={({ message }) => <p>{message}</p>}
/>