Material DateTimePicker onChange Typescript mismatch error


I have a following React + Material DatePicker code, reproduced literally from the respective documentation.

let App: React.FC = () => {

const [dateStart, handleDateStart] = useState(new Date());
const [dateEnd, handleDateEnd] = useState(new Date());

return (
    // Pickers from Material
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DateTimePicker value={dateStart} onChange={handleDateStart}/>
        <DateTimePicker value={dateEnd} onChange={handleDateEnd}/>)


However, I write in TypeScript and it complains on the onChange bits:

Error:(28, 47) TS2322: Type 'Dispatch<SetStateAction<Date>>' is not assignable to type '(date: MaterialUiPickersDate) => void'.
Types of parameters 'value' and 'date' are incompatible.
 Type 'MaterialUiPickersDate' is not assignable to type 'SetStateAction<Date>'.
 Type 'null' is not assignable to type 'SetStateAction<Date>'.


  "compilerOptions": {
    "target": "es5",
    "lib": [
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  "include": [

I am new to React and Material, how can I avoid this error?


The problem is that datepicker can return null as well (in case value is empty)

Working example:

const [date, setDate] = React.useState<Date | null>(new Date());

return (
    onChange={newDate => setDate(newDate)} 

Answered By – Dmitriy Kovalenko

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published