I have a desire to incorporate Google's Material UI Menu Item inside a TableCell, following their documentation guidelines here in this illustration:

https://i.stack.imgur.com/IffEM.png

This is my current method:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import {
  Grid,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Paper,
  Menu,
  MenuItem,
  Button,
} from '@material-ui/core';
import { ExpandLess, ExpandMore } from '@material-ui/icons';

const styles = theme => ({});

const Questions = ({ data, classes, openMenu, anchorEls, handleClose }) => {
  const CustomTableCell = withStyles(theme => ({
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
    },
    body: {
      fontSize: 14,
    },
  }))(TableCell);

  const formatData = rawData => Object.keys(rawData).map(key => rawData[key]);

  const n = { key: 'hi', rating: 55, text: 'wassup' };

  return (
    <Grid container alignItems={'center'} direction={'column'} spacing={8}>
      <Paper className={classes.root}>
        <Button
          key="close"
          aria-label="Close"
          color="inherit"
          className={classes.close}
          onClick={e => openMenu('dude', e)}
        >
          <ExpandMore />
        </Button>
        <Menu
          id={`dude`}
          key="menu"
          anchorEl={anchorEls.dude}
          open={Boolean(anchorEls.dude)}
          onClose={e => handleClose('dude', e)}
        >
          <MenuItem onClick={e => handleClose('dude', e)}>Delete</MenuItem>
          <MenuItem onClick={e => handleClose('dude', e)}>Flag</MenuItem>
          <MenuItem onClick={e => handleClose('dude', e)}>
            Mark Answered
          </MenuItem>
        </Menu>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <CustomTableCell>Question</CustomTableCell>
              <CustomTableCell numeric>Rating</CustomTableCell>
              <CustomTableCell>Upvote</CustomTableCell>
              <CustomTableCell>Downvote</CustomTableCell>
              <CustomTableCell>Options</CustomTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow className={classes.row} key={n.key}>
              <CustomTableCell component="th" scope="row">
                {n.text}
              </CustomTableCell>
              <CustomTableCell numeric>{n.rating}</CustomTableCell>
              <CustomTableCell>
                <IconButton
                  key="close"
                  aria-label="Close"
                  color="inherit"
                  className={classes.close}
                  onClick={() => ''}
                >
                  <ExpandLess />
                </IconButton>
              </CustomTableCell>
              <CustomTableCell>
                <IconButton
                  key="close"
                  aria-label="Close"
                  color="inherit"
                  className={classes.close}
                  onClick={() => ''}
                >
                  <ExpandMore />
                </IconButton>
              </CustomTableCell>
              <CustomTableCell>
                <Button
                  key="close"
                  aria-label="Close"
                  color="inherit"
                  className={classes.close}
                  onClick={e => openMenu(n.key, e)}
                >
                  <ExpandMore />
                </Button>
                <Menu
                  id={`simple-menu-${n.key}`}
                  key="menu"
                  anchorEl={anchorEls[n.key]}
                  open={Boolean(anchorEls[n.key])}
                  onClose={e => handleClose(n.key, e)}
                >
                  <MenuItem onClick={e => handleClose(n.key, e)}>
                    Delete
                  </MenuItem>
                  <MenuItem onClick={e => handleClose(n.key, e)}>dude</MenuItem>
                  <MenuItem onClick={e => handleClose(n.key, e)}>choc</MenuItem>
                </Menu>
              </CustomTableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Paper>
    </Grid>
  );
};

Questions.propTypes = {
  data: PropTypes.object.isRequired,
  anchorEls: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired,
  openMenu: PropTypes.func.isRequired,
  handleClose: PropTypes.func.isRequired,
};

Questions.defaultProps = {};

export default withStyles(styles)(Questions);

Although it is functional, the menu is not displaying in the correct position even when passing the related event e. I inserted a dummy element before the table for testing purposes and found that the dummy worked correctly, as shown in the screenshot below. https://i.stack.imgur.com/zrGKi.png

Meanwhile, the improperly positioned menu from the button in the table can be seen here: https://i.stack.imgur.com/0iDMW.png

Any suggestions on what might be causing this issue? It seems like the context and anchorEl are not accurately identifying the location on the page, but I'm unsure about how to address it.