How can I clear MUI X Date Picker input?

I would like to add a 'clear' button to a DatePicker from @mui/lab (5.0.0-alpha.55).

What I am attempting:

• Store a date field in state, passed as the value prop to DatePicker
• Change the date to null when desired to 'clear' the value & input

The behaviour I observe:

• If the date is valid, it works as expected, and the input is cleared
• If the date is not valid, the error is cleared, but the invalid date still stays in the input.

The rudimentary version I have attempted which shows the behaviour above can be seen here.

If you input a partial date, then click clear, you can observe that the input does not get cleared.

I would prefer to avoid a solution that involves changing the key, as that brings other issues, such as not respecting an external source changing the date to null, and needing additional hacks to respect the label transition when clearing the input.

My theory is that internally, DatePicker only updates the input value if it's different with the last valid value. Below is how the bug can occur:

• You clear the DatePicker when there is a valid value (like the initial Date), the state is reset successfully at first (value=null, inputValue='')
• You enter some invalid date. The state is now (value=Invalid Date, inputValue='invalid Text')
• Because the current value is invalid, it does not count and the DatePicker references the last valid value instead which is null, then decide that the current value doesn't change and skip dispatching the new input value (value=null, inputValue='invalid Text').

I'd classify this as a bug from MUI, you can create an issue on github if you want it to be fixed. In the meanwhile, you can fix the bug by applying this patch using patch-package:

• Install patch-package: npm i patch-package
• Add postinstall script in the package.json

"scripts": {
  "postinstall": "patch-package"
}

• Open the buggy file at node_modules\@mui\lab\internal\pickers\hooks\useMaskedInput.js and change it based on this commit.
• Run npx patch-package @mui/lab to create the patch that will be applied every time after you ran npm i @mui/lab again.
• Restart your dev server.