title: How can I clear MUI DatePicker input?
body: <p>I would like to add a 'clear' button to a <code>DatePicker</code> from <code>@mui/lab</code> (5.0.0-alpha.55).</p>
  <p>What I am attempting:</p>
  <ul>
  <li>Store a <code>date</code> field in state, passed as the <code>value</code> prop to <code>DatePicker</code></li>
  <li>Change the <code>date</code> to <code>null</code> when desired to 'clear' the value &amp; input</li>
  </ul>
  <p>The behaviour I observe:</p>
  <ul>
  <li>If the <code>date</code> is valid, it works as expected, and the input is cleared</li>
  <li>If the <code>date</code> is not valid, the <code>error</code> is cleared, but the invalid date still stays in the input.</li>
  </ul>
  <p>The rudimentary version I have attempted which shows the behaviour above can be seen <a href="https://codesandbox.io/s/clearable-date-picker-forked-b0co7?file=/src/App.tsx" rel="nofollow noreferrer">here</a>.</p>
  <p>If you input a partial date, then click <code>clear</code>, you can observe that the input does not get cleared.</p>
  <p>I would prefer to avoid a solution that involves changing the <code>key</code>, as that brings other issues, such as not respecting an external source changing the <code>date</code> to <code>null</code>, and needing additional hacks to respect the <code>label</code> transition when clearing the input.</p>