I have a data array and display its elements in table rows. The last table cell includes a menu item which calls a function with parameter. The problem is that function handleOpenApproveDialog is always fired with same data element, the last element of myData array.

CodeSandbox link

  const handleOpenApproveDialog = (ev, item) => {
    setAnchorEl(null);
    dispatch(openApproveDialog(item));
    //* problem: incoming item parameter is always same. The last element of myData array.
  };

  <TableBody>
    {myData.map((n, i) => {
      return (
        <TableRow
          tabIndex={-1}
          key={i}
          onClick={(event) => handleRowClick(event, n)}
        >

          <TableCell className="p-4 md:p-16" component="th" scope="row">
            {n.company}
          </TableCell>

          <TableCell
            className="p-4 md:p-16"
            component="th"
            scope="row"
            align="right"
          >
            <IconButton
              aria-label="actions"
              id="actions-button"
              aria-controls={isMenuOpen ? "actions-menu" : undefined}
              aria-expanded={isMenuOpen ? "true" : undefined}
              aria-haspopup="true"
              onClick={(ev) => {
                handleMenuClick(ev);
                ev.stopPropagation();
              }}
            >
              <MoreVertIcon />
            </IconButton>
            <Menu
              id="actions-menu"
              anchorEl={anchorEl}
              open={isMenuOpen}
              onClose={handleMenuClose}
            >
              <MenuItem
                onClick={(ev) => {
                  handleOpenApproveDialog(ev, n);
                  ev.stopPropagation();
                }}
              >
                Approve
              </MenuItem>
            </Menu>
          </TableCell>
        </TableRow>
      );
    })}
  </TableBody>