title: RadioGroup will not select when onChange is set that uses useState hook
body: <p>I have a RadioGroup that works wonderfully. The minute I move that RadioGroup into its own function -- the "select" does not work. It's as if the components fails to re-render fully. This happens when I attach an <code>onChange</code> event that uses state hook. You can see here, radios 1 and 2 work well. Radios 3 and 4 do not.</p>
  
  <p><a href="https://codesandbox.io/s/mui-radiogroup-gx0r0?fontsize=14&amp;module=%2Fsrc%2FDemo.jsx" rel="nofollow noreferrer">CodeSandbox Material UI RadioBox Example</a></p>
  
  <p>Here's the component that I'm using. The RadioGroup that's NOT wrapped into a function works well. The one that is -- it does not "select". Meaning the black dot does not appear in the select radio button.</p>
  
  <pre><code>function Demo(props) {
    const [inputs, setInputs] = useState({});
  
    const handleInputChange = event =&gt; {
      event.persist();
      setInputs(inputs =&gt; ({
        ...inputs,
        [event.target.name]: event.target.value
      }));
  
      console.debug(`${event.target.name}: ${event.target.value}`);
    };
  
    const NotWorking = props =&gt; {
      return (
        &lt;RadioGroup aria-label="two" name="two" row onChange={handleInputChange}&gt;
          &lt;FormControlLabel
            value="3"
            control={&lt;Radio color="primary" /&gt;}
            label="3"
            labelPlacement="end"
          /&gt;
          &lt;FormControlLabel
            value="4"
            control={&lt;Radio /&gt;}
            label="4"
            labelPlacement="end"
          /&gt;
        &lt;/RadioGroup&gt;
      );
    };
  
    return (
      &lt;React.Fragment&gt;
        &lt;RadioGroup aria-label="one" name="one" row onChange={handleInputChange}&gt;
          &lt;FormControlLabel
            value="1"
            control={&lt;Radio color="primary" /&gt;}
            label="1"
            labelPlacement="end"
          /&gt;
          &lt;FormControlLabel
            value="2"
            control={&lt;Radio /&gt;}
            label="2"
            labelPlacement="end"
          /&gt;
        &lt;/RadioGroup&gt;
        &lt;NotWorking /&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>
  
  <p>Help would be much appreciated.</p>