title: How to set custom radio group into redux form
body: <p>What should I do to set ColoredRadioGroup into state of my form? Tried few things from redux-form docs but it didn't help. I heard about passing onChange and value props but I'm not sure how to do it in my case.</p>
  
  <p><strong>ColoredRadioGroup.js:</strong></p>
  
  <pre><code>class CustomRadioGroup extends PureComponent {
    constructor(props) {
      super(props);
  
      this.state = {
        value: props.defaultValue,
      };
    }
  
    setValue = (value) =&gt; {
      this.setState(() =&gt; ({ value }));
    };
  
    handleChange = (event) =&gt; {
      if (this.props.onChange) {
        this.props.onChange(this.props.data.filter(elem =&gt; elem.value === event.target.value)[0]);
      }
      this.setState({ value: event.target.value });
    };
  
    render() {
      return (
        &lt;RadioGroup
          style={this.props.groupStyle}
          name={this.props.groupName}
          value={this.state.value}
          onChange={this.handleChange}
        &gt;
          &lt;FormControlLabel
            value="green"
            control={
              &lt;GreenRadio
                icon={&lt;CheckBoxOutlineBlankIcon /&gt;}
                checkedIcon={&lt;CheckBoxIcon /&gt;}
              /&gt;
            }
          /&gt;
          &lt;FormControlLabel
            value="yellow"
            control={
              &lt;YellowRadio
                icon={&lt;CheckBoxOutlineBlankIcon /&gt;}
                checkedIcon={&lt;CheckBoxIcon /&gt;}
              /&gt;
            }
          /&gt;
      ...
        &lt;/RadioGroup&gt;
      );
    }
  }
  
  export default CustomRadioGroup;
  </code></pre>
  
  <p><strong>In form file:</strong></p>
  
  <pre><code>  &lt;Field
      component={props =&gt; &lt;ColoredRadioGroup value={props.input.value} /&gt;}
      name="agent_group"
      type="radio"
    /&gt;
  </code></pre>