Proper Structure for building MegaMenu with hover trigger

[kaamiik]

Hi everyone
I'm building a hover-triggered mega menu with React Aria Components. The menu has:

• A left column with category buttons
• A right section with links that change based on the selected category

I want the Button trigger with hover and when I go outside of the Button The menu close. I found two structure in react aria But both does not have hover triggering and when I'm adding it manually cause lots of flickering

MenuTrigger + Menu

import { MenuTrigger, Menu, MenuItem, Popover, Button } from "react-aria-components";

function MegaMenu() {
  return (
    <MenuTrigger>
      <Button>Categories</Button>
      <Popover>
        <Menu>
          <MenuItem>Category 1</MenuItem>
          <MenuItem>Category 2</MenuItem>
        </Menu>
      </Popover>
    </MenuTrigger>
  );
}

DialogTrigger + Dialog

import { DialogTrigger, Dialog, Popover, Button } from "react-aria-components";

function MegaMenu() {
  return (
    <DialogTrigger>
      <Button>Categories</Button>
      <Popover>
        <Dialog>
          {/* Custom layout with buttons and links */}
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}

I wanna know which structure is better?
and How do I add hover trigger support?

The yellow colors are button and the blue ones that should open on hover are links list.