MUI Popover not anchoring properly (AnchorEl, React, material-table, MUI) - reactjs

Question

I've looked through many questions regarding popover anchoring, but I haven't seen any when using a MaterialTable element from the material-table library: https://github.com/mbrn/material-table .
While debugging it looks like the anchorEl properly holds the button reference, but it seems to rerender a second time and loses the reference. From what I can tell this is from the button being remounted. So the final rendering puts the popover in the top left corner of the screen by default. I'm wondering if anyone has found a way to either prevent this remount or some other workaround.
export class UsersList extends Component {
constructor(props) {
super(props);
this.state = {
anchorEl: null,
anchorReference: "anchorEl"
};
}
render() {
const { classes } = this.props;
var { anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
<MaterialTable
isLoading={this.state.isLoading}
columns={[
{ title: "Username", field: "username" },
...more columns
]}
data={this.state.users}
onRowClick={(evt, selectedRow) => this.setState({ selectedRow })}
//where I update my anchorEl on a click on the "edit" icon
actions={[
{
icon: "edit",
tooltip: "Edit",
onClick: (event, rowData) => {
this.setState({ anchorEl: event.currentTarget });
}
},
},
]}
components={{
Body: props => (
<React.Fragment>
<MTableBody {...props} />
<Popover
//a breakpoint here is hit twice. First time with valid ref, second time without ref
getContentAnchorEl={null}
id="myId"
open={open}
onClose={this.handlePopoverClose.bind(this)}
anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
open={open}
>
<Typography>The content of the Popover.</Typography>
</Popover>
EDIT** codesandbox running example: If you click on the edit column row item a popup shows up in the top left hand of the screen instead of next to the rowitem: https://codesandbox.io/s/loving-tdd-8r910?file=/src/App.js

Answer 1

Move popover to a separate component so that anchorEl would be in the same component as Popover. Example with menu:
function MenuCell() {
const [anchorEl, setAnchorEl] = useState(null);
return (
<div>
<IconButton
aria-label="more"
aria-haspopup="true"
onClick={(event) => setAnchorEl(event.currentTarget)}
>
<MoreVertIcon />
</IconButton>
<Menu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
<MenuItem selected={false} onClick={() => setAnchorEl(null)}>
Item 1
</MenuItem>
<MenuItem selected={false} onClick={() => setAnchorEl(null)}>
Item 2
</MenuItem>
<MenuItem selected={false} onClick={() => setAnchorEl(null)}>
Item 3
</MenuItem>
</Menu>
</div>
)
}
And use in Column cell definition:
function CustomTable() {
const menuColumn = {
id: 'menus',
Header: '',
Cell: ({ row }) => <MenuCell row={row} />,
};
// ...
}