title: Dynamic FormControlLabel Radio inside RadioGroup is not getting checked
body: <p>I'm using a RadioGroup component to display a dynamic list of Radio options using FormControlLabel. The dynamic radio options are successfully getting displayed and I'm able to retrieve the selected radio option using onChange in RadioGroup. However, when I check a radio option, that particular option does not appear "checked".</p>
  
  <p>Here's the code I'm using:</p>
  
  <pre><code>export default class Book extends Component {
    state = {
      slot: null,
    };
    ...
    onChange = (e) =&gt; {
      this.setState({ [e.target.name]: e.target.value });
    };
    ...
    &lt;FormControl component="fieldset" className={classes.formControl}&gt;
      &lt;FormLabel component="legend"&gt;Select availability slot&lt;/FormLabel&gt;
      &lt;RadioGroup
        aria-label="Slot"
        name="slot"
        className={classes.group}
        value={this.state.slot}
        onChange={this.onChange}
      &gt;
        {this.props.experience.availability !== null ? (
          this.props.experience.availability.map(single =&gt; (
            &lt;FormControlLabel
              key={single.id}
              value={single.id}
              control={&lt;Radio color="primary" /&gt;}
              label={single.title}
            /&gt;
          ))
        ) : ""}
        // Some manual options in addition to the above dynamic list
        &lt;FormControlLabel
          value="female"
          control={&lt;Radio color="primary" /&gt;}
          label="Female"
        /&gt;
        &lt;FormControlLabel
          value="male"
          control={&lt;Radio color="primary" /&gt;}
          label="Male"
        /&gt;
      &lt;/RadioGroup&gt;
    &lt;/FormControl&gt;
    ...
  }
  </code></pre>
  
  <p><code>this.props.experience.availability</code> is an array of objects that I'm getting from a call I'm making to the backend. The call is being made in <code>componentDidMount()</code>. I use Redux, which makes the result available as a prop.</p>
  
  <p>Now, if I manually add a few FormControlLabel components in the same RadioGroup, I can see that it's checked after selecting that option. </p>
  
  <p>I've taken two screenshots - this is when the manual FormControlLabel is selected: <a href="https://ibb.co/pL5Fy6L" rel="nofollow noreferrer">https://ibb.co/pL5Fy6L</a> and this is when one of my dynamic option is selected: <a href="https://ibb.co/Jq7mLN4" rel="nofollow noreferrer">https://ibb.co/Jq7mLN4</a></p>
  
  <p>You can see that in the second one, the "Female" option gets unchecked but the option that I selected (20-06-2019) does not appear to be checked.</p>
  
  <p>Can you please help me fix this?</p>
  
  <p>Thanks in advance!</p>