How to keep Antd submenu open on mouse leave while still opening new submenu on hover?

I have a dropdown menu with multiple levels of submenus. The problem is that the submenu easily gets closed when the mouse accidentally moves out of it.

I know there is an attribute triggerSubMenuOpenAction, but it controls both opening and closing at the same time. I can't set "hover" open and "click" close.

Is there a way to keep the current submenu open even when the mouse moves out, and open a new submenu(close old submenu) by hovering? Like most software submenu does.

I tried to use openKeys to manually control the submenu, but I can't find a way to do it. handleSubmenuOpenChange gets called multiple times with different array when mouse leave submenu, instead of return an empty array. It's hard to check whether the mouse is moved out or moved to another menu item.

Here is a demo, try to leave your mouse from submenu 3-2-2-1, and see the log prints three times.
https://codesandbox.io/p/sandbox/antd-dropdown-menu-m5rljv

  const [openDropdown, setOpenDropdown] = useState(false);
  const [openKeys, setOpenKeys] = useState<string[]>([]);

  const handleDropdownOpenChange = (nextOpen, info) => {
    console.log("onDropdownOpenChange", nextOpen, info);
    if (info.source === "trigger") {
      setOpenDropdown(nextOpen);
    }
  };

  const handleSubmenuOpenChange = (openKeys) => {
    console.log("openKeys", openKeys);
    setOpenKeys([...openKeys]);
  };

  return (
    <Dropdown
      menu={{ items, openKeys, onOpenChange: handleSubmenuOpenChange }}
      trigger={["click"]}
      open={openDropdown}
      onOpenChange={handleDropdownOpenChange}
    >
      <button>Click to open menu</button>
    </Dropdown>
  );