How to change state to unchecked/false when tapping on a checkbox in indeterminate state. React MUI Checkbox

I have a header checkbox that should act as a select all or deselect all. I also have an indeterminate state for it when some records are selected but not all.

The behavior I want is:

When the user taps on the header checkbox while it is in the indeterminate state, it should deselect all the records. But instead, it is selecting all.

<Checkbox
    indeterminate={numSelected > 0 && numSelected < rowCount}
    checked={rowCount > 0 && numSelected === rowCount}
    onChange={onSelectAllClick}
/>

numSelected is the number of rows selected.

Description Image of Behavior