Material-UI嵌套单选按钮

Question

我正在尝试使用material-ui和redux-form来嵌套嵌套单选按钮，但是在实现方法上还有些不足。

我要完成的工作： https://i.stack.imgur.com/QmCX7.gif
（选择单选按钮时，会出现更多表单选项。）

我当前没有嵌套的代码：

const renderRadioGroup = ({ input, ...rest }) => (
  <RadioButtonGroup
    {...input}
    {...rest}
    valueSelected={input.value}
    onChange={(event, value) => input.onChange(value)}
  />
);

在这样的地方使用：

<Field name="sex" component={renderRadioGroup}>
      <RadioButton value="male" label="male" />
      <RadioButton value="female" label="female" />
</Field>

我尝试过的事情：

<Field name="sex" component={renderRadioGroup}>
      <RadioButton value="male" label="male" />
      <div /*logic to only render this div when "male" is selected*/>
            <Field name="foo" component={renderRadioGroup}>
                  <RadioButton value="bar" label="bar" />
                  <RadioButton value="qux" label="qux" />
            </Field>
      </div>
      <RadioButton value="female" label="female" />
</Field>

但这不起作用。因为它给了我以下错误：
不变的违反行为
输入是一个空元素标记，并且既不能使用children也不能使用dangerouslySetInnerHTML。