The default behaviour of the ClockPicker when using the TimePicker component from Material-ui is:

1. ClockPicker display the hours view.
2. User clicks on an hour number.
3. 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.
4. User clicks on a minute.
5. On mouseup the ClockPicker captures that value and send it through its onChange prop and then the ClockPicker component is hidden

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.

Initially I include this code in the onChange prop of the ClockPicker component:

<ClockPicker
  onChange = { (newDate) => {
    if (date.getMinutes() !== newDate?.getMinutes()) {
      setDisplay(false)
    }    
  }}
/>

date here is the current Date object and newDate is the new date object being sent by the onChange prop through the callback.

So basically this checks when a user changes the minute value and it hides the component accordingly.

The problem is the onChange callback is fired immediately when the user mousedown on a minute number and I don't want that, I want it to fire when user mouseup only, how can I achieve this behavior? unfortunately ClockPicker doesn't accept the onMouseUp prop.