Переключатель не проверяется, реагируют даже после успешного изменения onChange

Question

Я пытаюсь реализовать переключатели в моем приложении реакции следующим образом:

const myChoices = [
  { value: 'none', label: 'None' },
  { value: 'app', label: 'App' },
  { value: 'users', label: 'Users' }
];

и в моем рендере я рендеринг переключатели следующим образом:

class TableReportTitleBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      groupByRadioButtonValue: 'none'
    };
  }

updateGroupByValue = event =>
    this.setState({
      groupByRadioButtonValue: event.target.value
    });

render(){
   return
       {myChoices.map((eachChoice, index) => (
          <CustomRadioButton
            key={index}
            onChangeHandler={this.updateGroupByValue}
            choice={eachChoice}
            selected={this.state.groupByRadioButtonValue}
          />
        ))};
}

Ниже представлен мой компонент CustomRadioButton

const CustomRadioButton = ({ choice, selected, onChangeHandler }) => {
  return (
    <Label text={choice.label}>
      <input
        type="radio"
        id={`radioBtnFor${choice.label}`}
        value={choice.value}
        onChange={onChangeHandler}
        checked={choice.value === selected}
      />
    </Label>
  );
};

Теперь при первом рендеринге моя кнопка None появляется отмеченной, но когда я нажимаю на другие кнопки, они не проверьте, даже кнопка None не будет проверена впоследствии. Я также попытался проверить, правильно ли устанавливается состояние, да, я также вижу, что «правда» утешается, когда я выбираю переключатель после выполнения console.log(choice.value === selected) внутри моего компонента CustomRadioButton. Кто-нибудь может помочь мне понять, почему кнопки не выбираются?