I want to use a MUI DatePicker component in React-Hook-Form. However, when I select a date, there is an error.

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

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

export const Demo = () => {
    const {control} = useForm();

    return (
        <form>
            <Controller
                name="dateOfBirth"
                control={control}
                render={({field}) => (
                    <DatePicker
                        {...field}
                        label="Date of Birth"
                        format={'YYYY-MM-DD'}
                    />
                )}
            />
        </form>
    )
}

enter image description here

I use <Controller/> from react-hook-form to control the MUI DatePicker and the control prop of DatePicker has been assigned the control value destructured from useForm() hook from react-hook-form. I don’t understand why the error exists. Would someone please help?