Material-UI PickerをTypeScriptでonChangeで型が一致しないとエラーになる場合の対応方法

Material-UIのDatePickerをTypeScriptで使用する時、公式のリファレンス通りに記述すると型不一致のエラーが発生します。

エラープログラム

import React, { useState } from "react";
import { DatePicker } from "@material-ui/pickers";

const MonthPicker: React.FC = () => {
  const [date, setDate] = useState(new Date());

  return (
    <DatePicker
      label="label"
      value={date}
      onChange={setDate}
      format="yyyy/MM/dd"
      animateYearScrolling
    />
  );
};

エラー内容

型 'Dispatch<SetStateAction<Date>>' を型 '(date: MaterialUiPickersDate) => void' に割り当てることはできません。
  パラメーター 'value' および 'date' は型に互換性がありません。
    型 'MaterialUiPickersDate' を型 'SetStateAction<Date>' に割り当てることはできません。
      型 'null' を型 'SetStateAction<Date>' に割り当てることはできません。ts(2322)
BasePicker.d.ts(10, 5): 予期された型は、型 'IntrinsicAttributes & DateValidationProps & BasePickerProps & { variant?: "dialog" | "inline" | "static" | undefined; } & ... 4 more ... & { ...; }' に対してここで宣言されたプロパティ 'onChange' から取得されています

対応方法

DatePickerがnullを返却する可能性があり、そこで型が一致せずにエラーになります。
Dateとnullの両方が返却されるように定義することで解消できます。

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

参考

Stack Overflow

Material DateTimePicker onChange Typescript mismatch error

https://stackoverflow.com/questions/62452160/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 = useState(new Date(...