Как установить пользовательскую радиогруппу в избыточную форму

Что я должен сделать, чтобы установить ColoredRadioGroup в состояние моей формы? Пробовал несколько вещей из документов с редукционной формой, но это не помогло. Я слышал о передаче реквизитов onChange и value, но не знаю, как это сделать в моем случае.

ColoredRadioGroup.js:

class CustomRadioGroup extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      value: props.defaultValue,
    };
  }

  setValue = (value) => {
    this.setState(() => ({ value }));
  };

  handleChangeEvent = (event) => {
    if (this.props.onChange) {
      this.props.onChange(this.props.data.filter(elem => elem.value === event.target.value)[0]);
    }
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <RadioGroup
        style = {this.props.groupStyle}
        name = {this.props.groupName}
        value = {this.state.value}
        onChange = {this.handleChangeEvent}
      >
        <FormControlLabel
          value = "green"
          control = {
            <GreenRadio
              icon = {<CheckBoxOutlineBlankIcon />}
              checkedIcon = {<CheckBoxIcon />}
            />
          }
        />
        <FormControlLabel
          value = "yellow"
          control = {
            <YellowRadio
              icon = {<CheckBoxOutlineBlankIcon />}
              checkedIcon = {<CheckBoxIcon />}
            />
          }
        />
    ...
      </RadioGroup>
    );
  }
}

export default CustomRadioGroup;

В файле формы:

  <Field
    component = {props => <ColoredRadioGroup value = {props.input.value} />}
    name = "agent_group"
    type = "radio"
  />