How can I programmatically close a Context Menu?

[marmite22]

In my app, a user can zoom in/out with the + and - keys. This scales the whole UI.

I have a bug where, if the user presses +/- while the context menu is open, the position of the menu gets out of sync with what was right clicked so I would like to close the Context Menu when a user presses those keys but I can't see a way of implementing the Context Menu with a controlled state.

Is there an event or method I can call to close the menu? A prop I can pass to allow me to control the isOpen state?

[marmite22]

I have got this working in a kind of hacky way by triggering an escape key press when - or + is pressed but it doesn't feel like the best way to achieve this so I'm hoping someone can point me in the right direction.

const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === '+' || event.key === '-') {
      const escapeEvent = new KeyboardEvent('keydown', {
        key: 'Escape',
        code: 'Escape',
        bubbles: true,
        cancelable: true,
      });

      // Dispatch the event on the desired element, e.g., the document or a specific element
      document.dispatchEvent(escapeEvent);
    }
  };