How to keep the list window when clicking an item in the ant-design submenu

Question

In the code below, when the cursor of Menu2 is placed, the item of Menu2 is displayed through the hover event.

And if you click an item of Menu2, the applied hover event is canceled and the window showing the item of Menu2 is hidden.

In this situation, how can I make the submenu window remain visible even after clicking the item in Menu2?

import React from "react";
import { Menu } from "antd";

const App = () => (
  <Menu mode="horizontal">
    <Menu.Item key="mail">Menu1</Menu.Item>
    <Menu.SubMenu key="SubMenu" title="Menu2">
      // I want to show the submenu items of Menu2 even when I click Sub Menu1.
      <Menu.Item key="two">Sub Menu1</Menu.Item>
      // I want to show the submenu items of Menu2 even when I click Sub Menu2.
      <Menu.Item key="three">Sub Menu2</Menu.Item>
    </Menu.SubMenu>
  </Menu>
);
export default App;

Answer 1

I solved the problem using stopPropagation.

  const moreAlertBtn = useCallback((e) => {        
    e?.stopPropagation();
    setAlertLimit((prev) => prev + 5); 
  }, []);