How to create a react portal within ant-design dropdown overlay

I'm using the ant-design Dropdown component with a right click action inside.

I want to be able to increment by 5 or 10 at once. But whenever this is being clicked it will ignore the one by the onClick listener for the Menu.Item.

const App = () => {
  const [counter, setCounter] = useState(1);

  const menu = (
    <Menu>
      <Menu.Item key="five" onClick={() => setCounter(counter + 5)}>
        by 5
      </Menu.Item>
      <Menu.Item key="ten" onClick={() => setCounter(counter + 10)}>
        by 10
      </Menu.Item>
    </Menu>
  );

  return (
    <div>
      <p>Counter: {counter}</p>
      <div onClick={() => setCounter(counter + 1)} style={STYLING}>
        <p>Click here to increment</p>
        <Dropdown overlay={menu} trigger={["contextMenu"]}>
          <span>
            Right click here for custom increment
          </span>
        </Dropdown>
      </div>
    </div>
  );
};

Codesandbox example: https://codesandbox.io/s/contextmenu-with-dropdown-antd-n4c5i?file=/index.js

I have tried to play around with ReactDOM.createPortal, but I just can't figure out how to use it correctly in a scenario like this one.

I know I should probably not go into a createPortal solution, but the reason I need this is not for this simple example, but I want to have this functionality inside the ant-design table column header while also having sorting support.

I figured I don't need to use portals. Instead I can use stopPropagation to prevent any parent node to get a onClick event.

Within the Menu.Item onClick event the standard javascript event is available under a domEvent field.

So we can create a function like this:

const menuOnClick = (amount) => (e) => {
  e.domEvent.stopPropagation();
  setCounter(counter + amount);
};

and update our Menu.Item onClick callbacks to this

<Menu.Item key="five" onClick={menuOnClick(5)}>

Sandbox example: https://codesandbox.io/s/contextmenu-with-dropdown-antd-solution-8029o?file=/index.js