재질 UI 라디오 버튼 그룹이 선택시 변경되지 않음

버튼 그룹에 재질을 사용하는 다음 반응 구성 요소가 있습니다.

페이지가 처음 렌더링 될 때 기본값 5가 선택되고 라디오 상자가로 나타납니다 checked.

그러나 다른 라디오 상자 중 하나를 선택하면 모든 라디오 상자가 검은 색으로 바뀌고 아무 것도 선택된 것으로 나타나지 않습니다. 확인하고 setValue호출 중이며 값을 변경하고 있는데 값 변경이 라디오 상자에 반영되지 않는 이유를 이해할 수 없습니까?

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;