[FormControl] Flash of unselected styling on Form Label in a radio group

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

This affects the examples given in the documentation.

When using a FormLabel, RadioGroup and FormControlLabels, as per the documentation example:

<FormControl>
      <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
      <RadioGroup
        aria-labelledby="demo-radio-buttons-group-label"
        defaultValue="female"
        name="radio-buttons-group"
      >
        <FormControlLabel value="female" control={<Radio />} label="Female" />
        <FormControlLabel value="male" control={<Radio />} label="Male" />
        <FormControlLabel value="other" control={<Radio />} label="Other" />
      </RadioGroup>
    </FormControl>

Clicking the labels of the radio buttons will cause the FormLabel to briefly show the 'unselected' style.

Clicking the radio buttons themselves will not cause this issue.

Expected behavior 🤔

The flash should not occur.

Steps to reproduce 🕹

Steps:

1. Visit: https://codesandbox.io/s/k1xmsu?file=/demo.js
2. Click the radio button labels
3. Note that the form label briefly turns grey.

Context 🔦

Jarring experience for forms.

Your environment 🌎

See sandbox.