No overload matches this call Date(value) ReactJS

Question

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