title: Material UI ClockPicker - implement autoclose on minute selection
body: <p>The default behaviour of the ClockPicker when using the TimePicker component from Material-ui is:</p>
  <ol>
  <li>ClockPicker display the hours view.</li>
  <li>User clicks on an hour number.</li>
  <li>On mouseup the ClockPicker captures that value and send it through its onChange prop and then the view of ClockPicker is changed to the minute view.</li>
  <li>User clicks on a minute.</li>
  <li>On mouseup the ClockPicker captures that value and send it through its onChange prop and then the ClockPicker component <strong>is hidden</strong></li>
  </ol>
  <p>Because I need to have more control on when the ClockPicker is displayed I can't use the TimePicker component but the ClockPicker itself and when you use the ClockPicker directly it doesn't auto close when the users selects a minute so basically I would like to re-implement that behavior.</p>
  <p>Initially I include this code in the onChange prop of the ClockPicker component:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;ClockPicker
    onChange = { (newDate) =&gt; {
      if (date.getMinutes() !== newDate?.getMinutes()) {
        setDisplay(false)
      }    
    }}
  /&gt;
  
  </code></pre>
  <p><code>date</code> here is the current Date object and <code>newDate</code> is the new date object being sent by the onChange prop through the callback.</p>
  <p>So basically this checks when a user changes the minute value and it hides the component accordingly.</p>
  <p>The problem is the onChange callback is fired immediately when the user <code>mousedown</code> on a minute number and I don't want that, I want it to fire when user <code>mouseup</code> only, how can I achieve this behavior? unfortunately ClockPicker doesn't accept the onMouseUp prop.</p>