javascript – How to pass data to MenuItem event handler

When I have an array and render a Menu for each element in the array, the click handlers for the items only receive the final element in the array instead of the element used for that render.

The use-case here is having a list of items where each item has a menu to perform actions specific to that item, like “Delete”, “Edit”, etc.

Not-working Example: https://codesandbox.io/s/material-demo-forked-u6902?file=/demo.js

export default function SimpleMenu() {
  const (anchor, setAnchor) = React.useState(null);

  const handleOpenMenu = (event) => {
    setAnchor(event.currentTarget);
  };

  const handleCloseMenu = (number) => {
    console.log(number);
    setAnchor(null);
  };

  return ("one", "two").map((number) => (
    <div key={number}>
      <Button onClick={() => handleCloseMenu(number)}>Log {number}</Button>
      <Button onClick={(e) => handleOpenMenu(e)}>Menu {number}</Button>
      <Menu
        anchorEl={anchor}
        keepMounted
        open={Boolean(anchor)}
        onClose={() => handleCloseMenu(number)}
      >
        <MenuItem onClick={() => handleCloseMenu(number)}>Log Number</MenuItem>
      </Menu>
    </div>
  ));
}

However, if I keep a map in memory of array elements to anchors for the Menu, then it works as expected.

Working Example: https://codesandbox.io/s/material-demo-forked-m7utx?file=/demo.js

export default function SimpleMenu() {
  const (anchors, setAnchors) = React.useState({});

  const handleOpenMenu = (number, event) => {
    setAnchors((prevState) => ({
      ...prevState,
      (number): event.currentTarget
    }));
  };

  const handleCloseMenu = (number) => {
    console.log(number);
    setAnchors((prevState) => ({
      ...prevState,
      (number): null
    }));
  };

  return ("one", "two").map((number) => (
    <div key={number}>
      <Button onClick={() => handleCloseMenu(number)}>Log {number}</Button>
      <Button onClick={(e) => handleOpenMenu(number, e)}>Menu {number}</Button>
      <Menu
        anchorEl={anchors(number)}
        keepMounted
        open={Boolean(anchors(number))}
        onClose={() => handleCloseMenu(number)}
      >
        <MenuItem onClick={() => handleCloseMenu(number)}>Log Number</MenuItem>
      </Menu>
    </div>
  ));
}

Is this the correct or intended way to render multiple menus?