MUI: The Menu component doesn't accept a Fragment as a child. Consider providing an array instead

I have used MUI Menu with some MenuItem. But I keep getting the error : MUI: The Menu component doesn't accept a Fragment as a child. Consider providing an array instead. . Can anyone explain the error in simple text please? I have seen many similar explanations online but none of them seem clear to me. I have seen the very first Q&A, but doesn’t explain much to me. I have taken this simple example from MUI’s webpage. But I still getting the error. How to solve it in similar context?

I do not have any array to work with. Each of my MenuItem will be custom made.

  const DataMenu = ({ anchor, onClick, onClose }: Props) => (
  <Menu
    id="data-menu"
    anchorEl={anchor}
    open={Boolean(anchor)}
    onClose={onClose}
  >
    <MenuItem onClick={onClick}>
      <ListItemIcon>
        <Db1 />
      </ListItemIcon>
      <Typography>Data 1</Typography>
    </MenuItem>
    <MenuItem onClick={onClose}>
      <ListItemIcon>
        <Db2 />
      </ListItemIcon>
      <Typography>Data 2</Typography>
    </MenuItem>
  </Menu>
);

export default DataMenu;

>Solution :

I think that source code explain better – https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Menu/Menu.js#L134

There is a check isFragment(child). It means if one of your child is wrapped in Fragment, then you will see the error.

But your code looks valid.

That code snippet is NOT ok and throw the error:

 <Menu>
    <>
      <MenuItem onClick={handleClose}>Profile</MenuItem>
      <MenuItem onClick={handleClose}>My account</MenuItem>
      <MenuItem onClick={handleClose}>Logout</MenuItem>
    </>
 </Menu>

That code snippet is OK:

 <Menu>
      <MenuItem onClick={handleClose}>Profile</MenuItem>
      <MenuItem onClick={handleClose}>My account</MenuItem>
      <MenuItem onClick={handleClose}>Logout</MenuItem>
 </Menu>