Как отрендерить компонент JSX (React), если он в массиве?

Question

[Lorem Ipsum]

import ContactsOutlinedIcon from '@mui/icons-material/ContactsOutlined';
import CallEndOutlinedIcon from '@mui/icons-material/CallEndOutlined'; // UPD

const LINKS = [
  {
    link_title: 'Contacts',
    action: openSpeedDial,
    icon: <ContactsOutlinedIcon/>,
  },
  {
    link_title: 'Lorem',
    icon: <CallEndOutlinedIcon/>, // UPD
  },
];

// UPD
{LINKS.map((el) => (
  <IconButton
    children={el.icon} // Не выводится
    aria-label={'Contacts'}
    color={'primary'}
    size={'large'}
  />
))}

В общем-то как правильно вызвать или определить в icon JSX элемент (React)

UPD:
Забыл главное:
А если у меня код вида:

{LINKS.map((el) => (
  <IconButton
    children={el.icon} // Не выводится
    aria-label={'Contacts'}
    color={'primary'}
    size={'large'}
  />
))}

То есть у меня есть массив, у элементов которого все иконки (icon) разные

Comments

[Mussy]

Не очень понимаю, что ты хочешь сделать.

Если тебе нужен то зачем его вытаскивать из массива?

[Mussy]

Если нужен ContactsOutlinedIcon*
Имел ввиду

[Lorem Ipsum]

Забыл самое важное:

А если у меня код вида:
<code lang="javascript">
{LINKS.map((el) => (
  <IconButton
    children={el.icon} // Не выводится
    aria-label={'Contacts'}
    color={'primary'}
    size={'large'}
  />
))}
</code>

[Lorem Ipsum]

Mussy, Я обновил вопрос, посмотрите метки "UPD", пожалуйста

Answer 1

[Denis Minimal]

А вот так?

{LINKS.map((el) => (
  <IconButton
    aria-label={'Contacts'}
    color={'primary'}
    size={'large'}
  >{el.icon}</IconButton>
))}