title: onChange could not be triggered in radioGroup with material-ui
body: <p>I'm using <code>RadioButton</code>component to display different options of a question in a component which I created:</p>
  
  <pre><code>import FormControl from "@material-ui/core/FormControl";
  import FormControlLabel from "@material-ui/core/FormControlLabel";
  import Grid from "@material-ui/core/Grid";
  import Radio from "@material-ui/core/Radio";
  import RadioGroup from "@material-ui/core/RadioGroup/RadioGroup";
  import Typography from "@material-ui/core/Typography";
  import React, { useEffect, useState } from "react";
  import { connect } from "react-redux";
  import SyntaxHighlighter from "react-syntax-highlighter";
  import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
  import { Dispatch } from "redux";
  import { incrementQuestion, IQuestion, questionRequest } from "../../actions/index";
  import ContentQuiz from "../../components/ContentQuiz";
  import history from "../../history/history";
  
  interface IProps {
    currentQuestionNumber: number;
    loadingData: boolean;
    questions: IQuestion[];
    questionRequest: () =&gt; void;
    incrementQuestion: (arg: number) =&gt; void;
    numberOfQuestions: number;
  }
  
  const Quiz = (props: IProps) =&gt; {
    const { currentQuestionNumber,
      loadingData,
      questions,
      questionRequest,
      incrementQuestion,
      numberOfQuestions } = props;
  
    const [answerOption, setAnswerOption] = useState(1);
  
    useEffect(() =&gt; {
      questionRequest();
    }, [questionRequest]);
  
    const handleChange = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      setAnswerOption(Number((event.target as HTMLInputElement).value));
    };
    const handleNextQuiz = () =&gt; {
      if (currentQuestionNumber === numberOfQuestions - 1) {
        history.push("/homepage");
      } else {
        incrementQuestion(answerOption);
        history.push("/contentQuiz");
      }
    };
  
    const currentQuestion = questions[currentQuestionNumber];
    return (
      &lt;div&gt;
        {loadingData ? ("Loading ...") : (
          &lt; ContentQuiz
            questionNumber={currentQuestionNumber + 1}
            handleClick={handleNextQuiz} &gt;
            &lt;div&gt;
              &lt;Typography variant="h3" gutterBottom&gt; What's the output of &lt;/Typography&gt;
              &lt;&gt;
                &lt;SyntaxHighlighter language="javascript" style={dark} &gt;
                  {currentQuestion.description.replace(";", "\n")}
                &lt;/SyntaxHighlighter &gt;
                  &lt;Grid container direction="column" alignItems="baseline"&gt;
                    &lt;Grid&gt;
                      &lt;FormControl component="fieldset"&gt;
                        &lt;RadioGroup
                          name="option"
                          value={answerOption}
                          onChange={handleChange}&gt;
                          {currentQuestion.options.map((option: string, index: number) =&gt; (
                            &lt;FormControlLabel
                              key={index}
                              control={&lt;Radio color="secondary" /&gt;}
                              label={option}
                              value={index + 1}
                              labelPlacement="end"
                            /&gt;))
                          }
                        &lt;/RadioGroup&gt;
                      &lt;/FormControl&gt;
                    &lt;/Grid&gt;
                  &lt;/Grid&gt;
              &lt;/&gt;
            &lt;/div &gt;
          &lt;/ContentQuiz &gt;
        )}
      &lt;/div&gt;
    );
  };
  
  const mapStateToProps = (state: any) =&gt; {
    const { currentQuestionNumber, loadingData, questions, numberOfQuestions } = state.quiz;
  
    return {
      currentQuestionNumber,
      loadingData,
      questions,
      numberOfQuestions
    };
  };
  
  const mapDispatchToProps = (dispatch: Dispatch) =&gt; {
    return {
      incrementQuestion: (answer: any) =&gt; dispatch&lt;any&gt;(incrementQuestion(answer)),
      questionRequest: () =&gt; dispatch&lt;any&gt;(questionRequest())
    };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Quiz);
  </code></pre>
  
  <p>However, it is possible to check different options with this code and according to <a href="https://material-ui.com/components/radio-buttons/#radio-button" rel="nofollow noreferrer">Radio buttons</a> the normal behavior is only one option could be checked.
  I find a similar <a href="https://stackoverflow.com/questions/53980379/react-material-ui-radiogroup-not-working-with-formcontrollabel-returned-by-compo">question</a> and tried to update my code according to the answer but it does not work because in my case the <code>handleChange</code> function is not called and I don't know why?</p>