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>

但这是行不通的。因为它给了我以下错误：
Invariant Violation
输入是一个 void 元素标记，并且不得具有children或使用dangerouslySetInnerHTML。