MUIのDataPickerで日付をクリアしたい

MUI DatePickerで日付をクリアできない

最近React/Nextjsでフロントエンドを書いています。アプリケーションの要求仕様上、どうしても表形式のグリッドが必要なのでMUI DataGridを使用しています。
その流れで他のコンポーネントもMUIを使用しています。

MUIのDatePickerを使っていて、ひとつ困ったことが・・・
一度、DatePickerを使って選択した日付をクリアできない
のです。

一旦、DatePickerを使って日付を選択すると、テキストボックスのところにフォーカスを持って行って、BSキーで削除しても削除できません

うーん・・・困った。日付の項目が入力必須ならいいけど、入力が任意（例えば検索条件）の場合、一旦、日付選択すると空欄にできない。

slotProps で actionBar を指定することにより、クリアのリンクをDatePickerに表示させることができます。

import React from 'react';
import {  DatePicker,  LocalizationProvider,} from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import 'dayjs/locale/ja';
import dayjs, { Dayjs } from 'dayjs';


  <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='ja'>
    <Box sx={{overflow: 'hidden !important'}}>
      <DatePicker
        sx={ dateText('20ch') }
        format="YYYY/MM/DD"
        disablePast = {disablePast}
        value={orderDate}
        onChange={onChange}
        slotProps={{
          actionBar: { actions: ['clear', 'cancel', 'accept' ] }, // ★ココ
        }}
      />
    </Box>
  </LocalizationProvider>

「CANCEL」、「CLEAR」、「OK」のリンクが表示できるようになります。