title: Click on radio button and display the corresponding value inside the radio button as selected in react js material UI design
body: <p>I am new to react js material UI design.
  What I want is something like below.</p>
  <p><a href="https://i.stack.imgur.com/O9faE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O9faE.png" alt="enter image description here" /></a></p>
  <p>If I clicked the first radio button , its value 1 should be displayed inside the selected radio button.</p>
  <p>I could only implement the standalone radio button using the following.</p>
  <pre><code>import React from 'react';
  import { withStyles } from '@material-ui/core/styles';
  import { green } from '@material-ui/core/colors';
  import Radio from '@material-ui/core/Radio';
  
  const GreenRadio = withStyles({
   root: {
    color: green[400],
    '&amp;$checked': {
    color: green[600],
    },
  },
  checked: {},
  })((props) =&gt; &lt;Radio color=&quot;default&quot; {...props} /&gt;);
  
  export default function RadioButtons() {
    const [selectedValue, setSelectedValue] = React.useState('a');
  
    const handleChange = (event) =&gt; {
     setSelectedValue(event.target.value);
    };
  
    return (
     &lt;div&gt;
      &lt;Radio
      checked={selectedValue === 'a'}
      onChange={handleChange}
      value=&quot;a&quot;
      name=&quot;radio-button-demo&quot;
      inputProps={{ 'aria-label': 'A' }}
    /&gt;
    &lt;Radio
      checked={selectedValue === 'b'}
      onChange={handleChange}
      value=&quot;b&quot;
      name=&quot;radio-button-demo&quot;
      inputProps={{ 'aria-label': 'B' }}
    /&gt;
    &lt;GreenRadio
      checked={selectedValue === 'c'}
      onChange={handleChange}
      value=&quot;c&quot;
      name=&quot;radio-button-demo&quot;
      inputProps={{ 'aria-label': 'C' }}
    /&gt;
    &lt;Radio
      checked={selectedValue === 'd'}
      onChange={handleChange}
      value=&quot;d&quot;
      color=&quot;default&quot;
      name=&quot;radio-button-demo&quot;
      inputProps={{ 'aria-label': 'D' }}
    /&gt;
    &lt;Radio
      checked={selectedValue === 'e'}
      onChange={handleChange}
      value=&quot;e&quot;
      color=&quot;default&quot;
      name=&quot;radio-button-demo&quot;
      inputProps={{ 'aria-label': 'E' }}
      size=&quot;small&quot;
    /&gt;
  &lt;/div&gt;
  );
  }
  </code></pre>
  <p>How can I get the value inside the selected button?</p>