I have a form that I'm trying to add a React datetime picker to, but I'm also trying to integrate it with react-hook-form so that it works with the rest of the form , but doesn't seem to work at all.

When the form is first rendered, the current date is not displayed in the date picker, only "----------" is displayed, and when I select a date from the popup window, the date in the field is not displayed either will change.

import { Controller, useForm } from 'react-hook-form'
import DateTimePicker from 'react-datetime-picker'
import 'react-datetime-picker/dist/DateTimePicker.css'
import 'react-calendar/dist/Calendar.css'

const Jobs = () => {
    const { control, register, handleSubmit, watch, formState: { errors } } = useForm();

    const onSubmit = handleSubmit(async ({ firstname, startdate }) => {
        console.log(startdate)
    })

    return (
        <form onSubmit={handleSubmit(onSubmit)}>

            <div>
                <input
                    id="firstname"
                    name="firstname"
                    type="text"
                    { ...register("firstname") }
                />
            </div>

            <div>
                <Controller
                    control={control}
                    name='startdate'
                    render={({ field: { onChange, value } }) => (
                        <DateTimePicker
                            onChange={onChange}
                            selected={value}
                        />
                    )}
                />
            </div>
        </form>
    )
}