Create custom component with React, problem with interfaces MUI REACT

Question

I want to create a custom component which maps two different elements, icon, title. But I don't know if I am declaring my interface properly since I'm getting error from Typrescript such as: Property 'map' does not exist on type '{ icon?: Element | undefined; title?: string | undefined; }'

I need to use map function because I don't know how many MenuItems I'm going to need, so I think is easier to map elements so It will only print the necessary ones

interface Props {
  menuItemElements: {
    icon?: JSX.Element
    title: string
  }
}

const MenuItemKebab = ({ menuItemElements }: Props) => {
  
  return (
    <>
      <Menu>
        <MenuItem>
          {menuItemElements.map((element: any) => {
            ;<>
              <ListItemIcon>{element.icon}</ListItemIcon>
              <Typography>{element.title}</Typography>
            </>
          })}
        </MenuItem>
      </Menu>
    </>
  )
}

export default MenuItemKebab

On the other hand I'm trying to render my custom component like this

  const menuItems = [
    { icon: <LinkIcon />, title: 'randomtitle' },
    { icon: <LinkIcon />, title: 'randomtitle2' },
  ]

    {
      field: 'modalKebab',
      headerName: '',
      sortable: false,
      disableColumnMenu: true,
      renderCell: () => <MenuItemKebab menuItemElements={menuItems} />,
    },

Answer 1

The menuItemElements field in the Props interface should be defined as an array of object:

interface Props {
  menuItemElements: {
    icon?: JSX.Element
    title: string
  }[]
}