ReactJS 将组件添加到 Javascript 对象

我使用一个Javascript对象来保存侧菜单的信息(例如名称、路径)，然后使用两个嵌套映射来构建由MUI个组件组成的实际菜单.这适用于存储为JS基元类型的信息，但我还想在该对象中包含一个图标，它本身是来自MUI的React组件.例子:

  const menuItems = {
    Text: [
      { name: 'TTS', path: 'textTTS', icon: </InboxIcon>, enabled: true },
    ],
    Image: [...],
    Video: [...],
    Live: [...],
  }

然而，我得到了一个错误，因为(我认为)当我将实际组件添加到对象时，它试图判断实际组件:

Unexpected token (26:45)

  24 |   const menuItems = {
  25 |     Text: [
> 26 |       { name: 'TTS', path: 'textTTS', icon: </InboxIcon>, enabled: true },
     |                                              ^
  27 |     ],

引用组件的正确方法是什么，而不实际将组件的contents添加到对象？

仅供参考，以下是我如何构建实际的侧菜单:

let menuComponents = Object.keys(menuItems).map((header, index) => {
    return (
      <List
        key={header}
        subheader={
          <ListSubheader component="div" id="nested-list-subheader">
            {header}
          </ListSubheader>
        }
      >
        {menuItems[header].map((item, index) => {
          return (
            <ListItem
              key={item.path}
              disablePadding
              sx={{ display: 'block' }}
              onClick={() => {
                navigate(item.path);
              }}
            >
              <ListItemButton disabled={item.enabled ? false : true}>
                <ListItemIcon>{item.icon}</ListItemIcon>
                <ListItemText primary={item.name} />
              </ListItemButton>
            </ListItem>
          );
        })}
      </List>
    );
  });