I use MUI DatePicker component in React-Hook-Form. When I console log the date value, I find that it’s a string.

ReactDOM.createRoot(document.getElementById('root')).render(
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <Demo />
    </LocalizationProvider>
)

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

export const Demo = () => {
    const {control} = useForm({
        defaultValues: {
            dateOfBirth: null,
        }
    });

    return (
        <form>
            <Controller
                name="dateOfBirth"
                control={control}
                rules={{valueAsDate: true}}
                render={({field: {onChange}}) => (
                    <DatePicker
                        label="Date of Birth"
                        format="YYYY-MM-DD"
                        onChange={date => onChange(dayjs(date).format("YYYY-MM-DD"))}
                    />
                )}
            />
        </form>
    )
}

enter image description here

Since my Spring Boot backend requests the data type of dateOfBirth value to be Date object, I added rules={{valueAsDate: true}} to <Controller/> but it doesn’t work. Could someone please teach me how to convert the value from string to Date?