title: Redux Form using Material Ui with nested MenuItem not working
body: <p>I am new to React, Redux Form and Material. I would like to create a nested drop down selector component that can be dropped in a Redux Form similar to this:</p>
  <p><a href="https://i.stack.imgur.com/fw7TM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fw7TM.png" alt="enter image description here" /></a></p>
  <p>Here is the renderSelectField used to create the select component.</p>
  <pre><code>const renderSelectField = ({
    input,
    label,
    meta: { touched, error },
    children,
    ...custom
  }) =&gt; (
    &lt;SelectField
      floatingLabelText={label}
      errorText={touched &amp;&amp; error}
      {...input}
      onChange={(event, index, value) =&gt; input.onChange(value)}
      children={children}
      {...custom}
    /&gt;
  );
  
  const MaterialUiForm = (props) =&gt; {
   
  
    const { handleSubmit, pristine, reset, submitting, classes } = props;
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;div&gt;
          &lt;Field
            name=&quot;favoriteColor&quot;
            component={renderSelectField}
            label=&quot;Favorite Color&quot;
          &gt;
            &lt;MenuItem value=&quot;ff0000&quot; primaryText=&quot;Red&quot; /&gt;
            &lt;MenuItem value=&quot;00ff00&quot; primaryText=&quot;Green&quot; /&gt;
            &lt;MenuItem value=&quot;0000ff&quot; primaryText=&quot;Blue&quot; /&gt;
          &lt;/Field&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;Field
            id='chapter'
             name='chapter'
             component={SelectMenu}
             label='Chapter'
          /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button type=&quot;submit&quot; disabled={pristine || submitting}&gt;
            Submit
          &lt;/button&gt;
          &lt;button type=&quot;button&quot; disabled={pristine || submitting} onClick={reset}&gt;
            Clear Values
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    );
  };
  </code></pre>
  <p>My SelectMenu component is</p>
  <pre><code>    const chapterFormValues = [
    {
      key: &quot;international-4&quot;,
      caption: &quot;France&quot;
    },
    {
      key: &quot;international-5&quot;,
      caption: &quot;Africa&quot;
    },
    {
      key: &quot;international-6&quot;,
      caption: &quot;United Kingdom&quot;
    },
    {
      key: &quot;usa-key&quot;,
      caption: &quot;North America&quot;,
      subMenuItems: [
        {
          key: &quot;usaChapter-1&quot;,
          caption: &quot;Central&quot;
        },
        {
          key: &quot;usaChapter-2&quot;,
          caption: &quot;East&quot;
        }
      ]
    }
  ];
  
  const SelectMenu = (props) =&gt; {
  
    const [open, setOpen] = useState(false);
  
    const handleClick = () =&gt; {
      setOpen((open) =&gt; !open);
    };
  
    const handleSubMenuClose = () =&gt; {
      setOpen((open) =&gt; !open);
    };
  
    const { label, classes } = props;
    const renderMenuItems = () =&gt; {
      return (
        chapterFormValues !== undefined &amp;&amp;
        chapterFormValues.map((option) =&gt; {
          if (option.hasOwnProperty(&quot;subMenuItems&quot;)) {
            return (
              &lt;React.Fragment&gt;
                &lt;MenuItem onClick={handleClick} className={classes.menuItem}&gt;
                  {option.caption}
                  {open ? &lt;IconExpandLess /&gt; : &lt;IconExpandMore /&gt;}
                &lt;/MenuItem&gt;
  
                &lt;Collapse in={open} timeout=&quot;auto&quot; unmountOnExit&gt;
                  &lt;hr /&gt;
                  {option.subMenuItems.map((item) =&gt; (
                    &lt;MenuItem
                      key={item.key}
                      className={classes.subMenuItem}
                      onClick={handleSubMenuClose}
                    &gt;
                      {item.caption}
                    &lt;/MenuItem&gt;
                  ))}
                &lt;/Collapse&gt;
              &lt;/React.Fragment&gt;
            );
          }
          return (
            &lt;MenuItem
              className={classes.menuItem}
              key={option.key}
              value={option.caption === &quot;None&quot; ? &quot;&quot; : option.caption}
            &gt;
              {option.caption}
            &lt;/MenuItem&gt;
          );
        })
      );
    };
  
    return (
      &lt;FormControl&gt;
        &lt;InputLabel&gt;{label}&lt;/InputLabel&gt;
        &lt;MuiSelect
          input={&lt;Input id={`${props.id}-select`} /&gt;}
          value={props.value}
          {...props.input}
          {...props.custom}
        &gt;
          {renderMenuItems()}
        &lt;/MuiSelect&gt;
      &lt;/FormControl&gt;
    );
  };
  </code></pre>
  <p>Here is a link to the code sandbox I created. <a href="https://codesandbox.io/s/dark-snowflake-x9jun" rel="nofollow noreferrer">Material UI ReduxForm Select</a></p>
  <p>It works except the nested drop down does not update the selector field. I have researched this and found this issue <a href="https://stackoverflow.com/questions/56181488/redux-form-material-ui-select-with-nested-lists-not-working">Stackoverflow redux form with nested lists</a> but no solution.</p>
  <p>Can anyone give me advice as to what I am missing? I believe I need to pass the event in the handleSubMenuClose function back to the Redux Form somehow but am stumped as to how to do this.</p>