I use ReactJS and DateTimePicker from @mui/x-date-pickers to design a custom DateTimeInput. My code as below:

import { FieldValues, useController, UseControllerProps } from "react-hook-form";
import { DateTimePicker, DateTimePickerProps } from '@mui/x-date-pickers'

type Props<T extends FieldValues> = {} & UseControllerProps<T> & DateTimePickerProps

export default function DateTimeInput<T extends FieldValues> (props: Props<T>) {

    const {field, fieldState} = useController({...props});
    return (
        <DateTimePicker
            {...props}
            value={field.value ? new Date(field.value) : null}
            onChange={value => {
                field.onChange(new Date(value))
            }}
            sx={{width: '100%'}}
            slotProps={{
                textField: {
                    onBlur: field.onBlur,
                    error: !!fieldState.error,
                    helperText: fieldState.error?.message                    
                }
            }}
        >
            
        </DateTimePicker>
    )
}

In line:

onChange={value => {
                    field.onChange(new Date(value))
                }}

Has an issue is:

No overload matches this call. Overload 1 of 4, '(value: string | number | Date): Date', gave the following error. Argument of type 'unknown' is not assignable to parameter of type 'string | number | Date'. Overload 2 of 4, '(value: string | number): Date', gave the following error. Argument of type 'unknown' is not assignable to parameter of type 'string | number'.ts(2769) (parameter) value: unknown

And in line

type Props<T extends FieldValues> = {} & UseControllerProps<T> & DateTimePickerProps

Has an issue is:

Generic type 'DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>' requires between 1 and 2 type arguments.ts(2707) (alias) interface DateTimePickerProps<TDate extends unknown, TEnableAccessibleFieldDOMStructure extends boolean = false> import DateTimePickerProps

How can I fix these issues?

Thank you all in advance