Reactjs - open material ui popover on focus

I have a table that is dynamically populated by an API. It needs to be editable, and I've figured out that part, but it also needs a way to update the API after edits.

I want to use a popover with save/cancel buttons. I've tried everything I can think of, but I can't get the popover to show up, and it doesn't error out either. The material ui docs only cover click/hover popovers. I noticed that reactstrap seems to have a popover that works with focus, but I'm trying to use material UI because I don't want to bloat my project with extra packages if I don't have to.

This is what I have in my EditPopover.jsx file:

const styles = theme => ({
  popover: {
    pointerEvents: 'none',
  },
  paper: {
    padding: theme.spacing.unit,
  },
});

class EditPopover extends React.Component {
  state = {
    anchorEl: null
  };

  handlePopoverOpen = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handlePopoverClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { classes } = this.props;
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
      <div>
        <Popover
          className={classes.popover}
          classes={{
            paper: classes.paper,
          }}
          open={open}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          onClose={this.handlePopoverClose}
        >
          <Typography>Click for full size image.</Typography>
        </Popover>
      </div>
    );
  }
}

EditPopover.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(EditPopover);

This is where I call the popover. I have tried using onClick as well:

  handleEdit = event => {
   return(
    <EditPopover event={event}/>
   )
  }

  renderEditable = cellInfo => {
    return (
      <div
        contentEditable
        suppressContentEditableWarning
        onFocus={this.handleEdit}
      > 

      </div>
    );
  };

The first and second code blocks in this post are in separate files. I feel like I'm not passing something correctly to the popover.