Как получить компонент React из свойства объекта

У меня есть компонент SliderMenu React, который получает массив, содержащий его элементы. Эти элементы являются объектами, и одним из их свойств является значок, который будет отображаться в меню:

function SliderMenu({ options }) {
  return (
    <>
      <Drawer open>
        <List>
          {options.map((item) => {
            const { icon: ItemIcon } = item || {};
            return (
              <ListItem button key={`menuItem_${item.text.replace(/\s/g, '')}`}>
                <ListItemIcon>
                  <ItemIcon />
                </ListItemIcon>
                <ListItemText primary={item.text} />
              </ListItem>
            );
          })}
        </List>
      </Drawer>
    </>
  );
}

Этот компонент вызывается из верхнего компонента (потому что я хотел бы иметь возможность создавать несколько SliderMenu, если они мне нужны), который указывает массив элементов и передает их в качестве реквизита:

import React from 'react';
import { HomeRoundedIcon } from '@material-ui/icons/HomeRounded';
import SliderMenu from '../../components/SliderMenu';

function MainMenu() {
  const menuOptions = [
    {
      text: 'Home',
      icon: HomeRoundedIcon,
    },
  ];

  return (
    <SliderMenu options={menuOptions} />
  );
}

export default MainMenu;

Проблема здесь в том, что всякий раз, когда я пробую этот код, ItemIcon не определено, и я получаю следующую ошибку:

Ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Проверьте метод рендеринга SliderMenu.

Однако, если я попытаюсь:

const menuOptions = [
    {
        text: 'Home',
        icon: <HomeRoundedIcon />,
    },
];

ItemIcon имеет значение, и я получаю следующую ошибку:

Ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс/функция (для составных компонентов), а получено: объект.

Проверьте метод рендеринга SliderMenu.

Я хотел бы иметь возможность указывать разные элементы меню с разными значками и т. Д., В зависимости от контекста, а затем использовать общий компонент для его рендеринга и иметь согласованное поведение во всех меню.

Как я могу определить значок в объекте, используя библиотеку компонентов значков, а затем передать его через props в SliderMenu, чтобы он мог его отобразить (без необходимости импортировать все значки и переключаться на посмотреть, какой значок должен отображать)?