Javascript 将菜单项追加到物料界面，选择React中的输入

所以我对react甚至javascript都不是很在行，但我想做的是采用以下react元素：

  const selectItem = (
       <Select defaultValue="" id="type-select" label="Type">
        <MenuItem value="">
        <em>None</em>
      </MenuItem>
      </Select>
    )

用key:array设置一个对象，如果不清楚的话

我想要的与此类似：

 <Select defaultValue="" id="grouped-select">
  <MenuItem value="">
    <em>None</em>
  </MenuItem>
  <ListSubheader>Category 1</ListSubheader>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
  <ListSubheader>Category 2</ListSubheader>
    <MenuItem value={3}>Option 3</MenuItem>
    <MenuItem value={4}>Option 4</MenuItem>
</Select>

没有一个
第一类
选择1
选择2
第2类
选择3
选择4

最好的方法是什么

 <Select defaultValue="" id="grouped-select">
  <MenuItem value="">
    <em>None</em>
  </MenuItem>
  <ListSubheader>Category 1</ListSubheader>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
  <ListSubheader>Category 2</ListSubheader>
    <MenuItem value={3}>Option 3</MenuItem>
    <MenuItem value={4}>Option 4</MenuItem>
</Select>