Pass parameter to context menu - reactjs

Question

I am currently studying Material UI 5 and specifically Context Menu subject - https://mui.com/material-ui/react-menu/#context-menu.
Can someone explain me why the handleClose function always print the last index in the array - 4?
import * as React from "react"
import Menu from "#mui/material/Menu"
import MenuItem from "#mui/material/MenuItem"
import Typography from "#mui/material/Typography"
export default function ContextMenu() {
const [contextMenu, setContextMenu] = React.useState(null)
const handleContextMenu = (event) => {
event.preventDefault()
setContextMenu(
contextMenu === null
? {
mouseX: event.clientX + 2,
mouseY: event.clientY - 6,
}
: null
)
}
const handleClose = (i) => {
setContextMenu(null)
console.log(i)
}
return (
<>
{["a", "b", "c", "d", "e"].map((item, index) => (
<div
key={index}
onContextMenu={handleContextMenu}
style={{ cursor: "context-menu" }}
>
<Typography variant='h6' component='h1' sx={{ padding: 4 }}>
{item}
</Typography>
<Menu
open={contextMenu !== null}
onClose={handleClose}
anchorReference='anchorPosition'
anchorPosition={
contextMenu !== null
? { top: contextMenu.mouseY, left: contextMenu.mouseX }
: undefined
}
>
<MenuItem onClick={() => handleClose(index)}>one</MenuItem>
<MenuItem onClick={() => handleClose(index)}>two</MenuItem>
<MenuItem onClick={() => handleClose(index)}>three</MenuItem>
</Menu>
</div>
))}
</>
)
}

Answer 1

The way you currently have the on clicks setup is that it accesses the value index has at the time you click it, not the value it had when the function was created.
Change
onClick={() => handleClose(index)}
To
onClick={((index) => () => handleClose(index))(index)}

Answer 2

check the following code and see how you should manage user's options :
import * as React from "react";
import Menu from "#mui/material/Menu";
import MenuItem from "#mui/material/MenuItem";
import Typography from "#mui/material/Typography";
export default function ContextMenu() {
const initialState = {
element: null,
item: null
};
const [state, setState] = React.useState(initialState);
const handleListItemClick = (element, item) => {
setState({
element,
item
});
};
const handleMenuItemClick = (option) => {
setState(initialState);
switch (option) {
case "one":
console.log(state.item, "one");
break;
case "two":
console.log(state.item, "two");
break;
default:
break;
}
};
return (
<div>
{React.Children.toArray(
["a", "b", "c", "d", "e"].map((item) => (
<Typography
onClick={(e) => handleListItemClick(e.target, item)}
sx={{ margin: 4 }}
>
{item}
</Typography>
))
)}
<Menu open={state.element !== null} anchorEl={state.element}>
<MenuItem onClick={() => handleMenuItemClick("one")}>one</MenuItem>
<MenuItem onClick={() => handleMenuItemClick("two")}>two</MenuItem>
</Menu>
</div>
);
}
codesandbox: https://codesandbox.io/s/great-microservice-w5jh00