React中，onChange的事件是否可以只读取内层标签的值？

Question

我有一个列出了一些 MenuItems 的 Select 下拉列表，但现在我想添加一个 ListSubheader 并且我在从我的 MenuItem 中获取 event.target.value 时遇到问题，因为我必须将它们包装在一个 div 标签中，并且事件只是检查外部 div 标签的值。

旧菜单项和选择下拉列表：

menuItems = [
{name: 'option A', value: 'optionA'}, 
{name: 'option B', value: 'optionB'},
{name: 'option C', value: 'optionC'}
]

<Select onChange={(event) => {console.log(event.target.value}}>
  menuItems.map((menuItem) => {
    return {
      <MenuItem value={menuItem.value}> 
        {menuItem.name}
      </MenuItem>
    }
  })
</Select>

这很好用。

但是为了添加 ListSubheader，我必须创建看起来像这样的新菜单项

newMenuItems = [
  {subheader: 'subheader 1', items: [
    {name: 'option A', value: 'optionA'}
  ]},
  {subheader: 'subheader 2', items: [
    {name: 'option B', value: 'optionB'},
    {name: 'option C', value: 'optionC'}
  ]}
]

和我的新选择下拉列表

<Select onChange={(event) => {console.log(event.target.value}}>
  newMenuItems.map((ele) => {
    return {
      <div>
        <ListSubheader>{ele.subheader}</ListSubheader>
        
        {ele.items.map((menuItem) => {
          return (
            <MenuItem value={menuItem.value}> 
              {menuItem.name}
            </MenuItem>
          )
        })}
      </div>
    }
  })
</Select>

如您所见，在我的新选择下拉列表中，我必须将 ListSubheader 和 MenuItem 包装在一个 div 标签中，而且我不能使用空标签，因为 Select 标签不喜欢 Fragments。

我希望能够像以前一样选择我的选项，有没有办法让事件跳过外部标签并简单地在 MenuItem 中查找值？

谢谢