Material-ui: FormControlLabel on Checkbox not working as expected with React Concurrent Mode

[raphaelbs]

• [ ] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

It needs double click on the label of a Checkbox to change its value.

Expected Behavior 🤔

To be the same as clicking on the checkbox itself: one click to toggle the value.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-checkbox-on-react-concurrent-mode-t6i83

Steps:

1. try clicking once on the Material UI's Checkbox label

Context 🔦

Enable the React concurrent mode using React and React-Dom v0.0.0-experimental-d7382b6c4.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.6.1 |
| React | v0.0.0-experimental-d7382b6c4 |
| Browser | Chrome Version 83.0.4103.106 (Official Build) (64-bit) |
| TypeScript | - |

[joshwooding]

Things I have observed:

Works for touch e.g. on iPhone
Works without FormControl
Works with an uncontrolled checkbox.

https://codesandbox.io/s/material-ui-checkbox-on-react-concurrent-mode-gbcv9

[jedwards1211]

React Concurrent mode is going to ruin our lives