Material ui radio button group not changing on select

I have the following react component using material for a button group.

When the page first renders, the default value of 5 is selected and the radio box appears as checked.

However when I select any of the other radio boxes, all radio boxes go black and nothing appears as selected. I have checked and setValue is being called and changing the value, so I don’t understand why the value change isn’t being reflected in the radio boxes?

import React, {useState} from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import Typography from '@material-ui/core/Typography';

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    marginTop: theme.spacing(3)
  },
  amountSelectGroupLabel: {
    '&.MuiFormLabel-root': {
      color: theme.palette.borders.primary
    }
  }
}));

const RadioButtons = (props) => {
  const { radioButton, ...labelProps } = props;
  return (
    <FormControlLabel
      control={<Radio color="secondary" />}
      label={`$${props.value}`}
      labelPlacement="bottom"
      {...labelProps}
    />
  )
}

function SelectTokenAmountToBuyComponent(props) {
  const classes = useStyles();
  const amountRanges = [1, 5, 10, 20, 50, 100];
  const [value, setValue] = useState(5);

  function handleChange(event) {
    const {target: {value: _value}} = event;

    setValue(_value);
  }

  return (
    <FormControl className={classes.root} component="fieldset">
      <FormLabel className={classes.amountSelectGroupLabel} component="legend">
        <Typography gutterBottom variant='subtitle2'>
          Select amount
        </Typography>
        <Typography variant='caption'>
          ($1 = 100 tokens)
        </Typography>
      </FormLabel>
      <RadioGroup
        row
        name="monetaryValue"
        value={value}
        onChange={handleChange}>
        {
          amountRanges.map((amount, index) => (
            <RadioButtons key={`select-amount-${amount}-tokens-${index}`} value={amount} radioButton/>
          ))
        }
      </RadioGroup>
    </FormControl>
  )
}

export default SelectTokenAmountToBuyComponent;

Answer

the onChange event returns the value as type string. Your setState then triggers a rerender and assigns that value to RadioGroup. It stops working at this point because RadioGroup has, for example, value={"10"}, while the corresponding RadioButtons has value={10}