How to create a custom Material UI DataGrid column menu item?

Question

For Material UI's DataGrid (v5.2.0), I am trying to create a custom column menu item to act on the column. If I set onClick={hideMenu} then the menu successfully hides when I click it. However, if I set onClick={handleMenuItemClick}, and in that function call hideMenu(), then I get an uncaught error, complaining about stopPropagation. This makes me think that I'm successfully accessing hideMenu() but the reference is wrong.

So my question is:

1. How do I correctly pass reference so that I can call/reference hideMenu and currentColumn?

2. (Extra Credit) Once I get that reference right, how do I mutate the data grid, such as deleting/adding/renaming columns? Do I have to pass apiRef (eg useGridApiRef() ) or is the reference to currentColumn enough?

Uncaught TypeError: Cannot read properties of undefined (reading 'stopPropagation') at index-esm.js:15:1 at handleMenuItemClick (CustomColumnMenuComponent.jsx:17:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1) at executeDispatch (react-dom.development.js:8243:1) at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1) at processDispatchQueue (react-dom.development.js:8288:1) at dispatchEventsForPlugins (react-dom.development.js:8299:1)

import * as React from 'react';
import MenuItem from '@mui/material/MenuItem';
import {
  GridColumnMenuContainer,
} from '@mui/x-data-grid-pro';

export default function CustomColumnMenuComponent(props) {
  const { hideMenu, currentColumn, ...other } = props;

  const handleMenuItemClick = () => {
    // do something with currentColumn...
    hideMenu()
  };

  return (
    <GridColumnMenuContainer hideMenu={hideMenu} currentColumn={currentColumn} {...other}>
      <MenuItem onClick={handleMenuItemClick} column={currentColumn}>Mutate Column</MenuItem>
      <MenuItem onClick={hideMenu} column={currentColumn}>Close Menu</MenuItem>
    </GridColumnMenuContainer>
  );
};