MUI Menu with dynamic content

I’m trying to have a different menu that are showing the names of each person I’m displaying in my app, but the name is the same inside all the menus.
All the buttons also have the different users names (this works) but not on the inside
Here is a simple examples of what I’m doing:

const MyComponent = () => {
  const user = [
    {name: "John"},
    {name: "Marc"},
    {name: "Joe"}
  ];

  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return(
    <>
      {users.map((user) => (
        <Button
          onClick={handleClick}
          aria-controls={open ? 'account-menu' : undefined}
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
        >
          {user.name} menu
        </Button>

        <Menu
          anchorEl={anchorEl}
          id="account-menu"
          open={open}
          onClose={handleClose}
          onClick={handleClose}
        >
          <MenuItem>
            {user.name}
          </MenuItem>
        </Menu>
      ))}
    </>
  )
}

I end up having for each menus "John" instead of each one having the differents names..

>Solution :

This could be because all Menu component are controlled by a single anchorEl state and are stacked together when open.

It looks like the goal is to have each Button host its own Menu. If this is the case, consider to build the Button and Menu as a separate component such as MyUserButton, so that each could manage its own anchorEl state without conflicts.

Tested in demo here: stackblitz

Example for the MyUserButton component:

const MyUserButton = ({ user }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <>
      <Button
        onClick={handleClick}
        aria-controls={open ? 'account-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
      >
        {user.name} menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        id="account-menu"
        open={open}
        onClose={handleClose}
        onClick={handleClose}
      >
        <MenuItem>{user.name}</MenuItem>
      </Menu>
    </>
  );
};

The main MyComponent can be simplified as:

const users = [{ name: 'John' }, { name: 'Marc' }, { name: 'Joe' }];

const MyComponent = () => {
  return (
    <>
      {users.map((user) => (
        <MyUserButton key={user.name} user={user} />
      ))}
    </>
  );
};