Определенный значок для индекса в шаблоне React with Material UI

Я пытаюсь использовать if, потому что хочу добавить значок для каждого ListItem, но React не позволяет мне это сделать, как мне это сделать? Должен ли я что-то изменить? Заранее спасибо.

   <List>
      {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
        <ListItem button key = {text}>
          <ListItemIcon>
            {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
          </ListItemIcon>
          <ListItemText primary = {text} />
        </ListItem>
      ))}
   </List>

Я пытался использовать это, но это не сработало:

<ListItemIcon>
   {index === 0 <InboxIcon/>}
   {index === 1 <MailIcon/>}
   {index === 2 <DeleteForeverOutlinedIcon />}
   {index === 3 <DeleteTwoToneIcon />}
</ListItemIcon>