Dropdown with contextMenu trigger closes instantly when hovering — How to keep it open?

I'm using Ant Design's Dropdown component in a React app. The dropdown is triggered via right-click using trigger={["contextMenu"]}. However, there's an issue:

When I right-click on the element the dropdown appears, but as soon as I try to move my mouse toward the menu to click "Start", "Logs", or "Delete", the menu disappears instantly.

What I’ve Tried:

• Set a controlled open state using useState(false)
• Used onOpenChange={(open) => setDropdownOpen(open)} along with open={dropdownOpen}
• Moved my logic to set status inside onOpenChange when open === true
• Added mouseLeaveDelay={0.3}
• Used getPopupContainer={(triggerNode) => triggerNode.parentNode}
• Ensured my menu={{ items }} is correct and stable
• Wrapped the trigger element in a <div> with a fixed height and width

However, nothing worked. The dropdown still vanishes as soon as I try to hover over the menu options.

const [dropdownOpen, setDropdownOpen] = useState(false);

const items = [
  {
    key: "start",
    label: "Start",
  },
  {
    key: "logs",
    label: "Logs",
  },
  {
    key: "delete",
    label: "Delete",
  },
];

<Dropdown
  open={dropdownOpen}
  onOpenChange={(open) => {
    setDropdownOpen(open);
    if (open && node?.id) {
      // setting status based on componentData
    }
  }}
  menu={{ items }}
  trigger={["contextMenu"]}
  mouseLeaveDelay={0.3}
  getPopupContainer={(trigger) => trigger.parentNode}
>
  <div style={{ width: 150, height: 100, background: "#f0f0f0" }}>
    Right-click me
  </div>
</Dropdown>