How to open Dialog from Popover?

[utg1-tdawg]

I have a <OpenDialogButton /> component within a popover panel. It is supposed to open a <Dialog /> component but can't seem to be working.

Here is the faulty code:

import { Fragment, ReactNode } from "react";
import {
  Popover,
  Dialog as HeadlessDialog,
  Transition,
} from "@headlessui/react";

import { useDisclosure } from "@/hooks/useDisclosure";

export default function () {
  return (
    <>
      <Popover>
        {() => (
          <>
            <Popover.Button>
              <span>Popover</span>
            </Popover.Button>

            <Popover.Panel>
              <OpenDialogButton />
            </Popover.Panel>
          </>
        )}
      </Popover>
    </>
  );
}

function OpenDialogButton() {
  const { isOpen, open, close } = useDisclosure();

  return (
    <div>
      <button onClick={open}>open dialog</button>
      <Dialog isOpen={isOpen} close={close}>
        <button>Button inside dialog</button>
      </Dialog>
    </div>
  );
}

function Dialog({
  isOpen,
  close,
  children,
}: {
  isOpen: boolean;
  close: () => void;
  children: ReactNode;
}) {
  return (
    <Transition appear show={isOpen} as={Fragment}>
      <HeadlessDialog as="div" className="relative z-10" onClose={close}>
        <HeadlessDialog.Panel>{children}</HeadlessDialog.Panel>
      </HeadlessDialog>
    </Transition>
  );
}

And here is the code that works:

export default function () {
  const { isOpen, open, close } = useDisclosure();
  return (
    <>
      <Popover>
        {() => (
          <>
            <Popover.Button>
              <span>Popover</span>
            </Popover.Button>

            <Popover.Panel>
              <button onClick={open}>open dialog</button>
            </Popover.Panel>
          </>
        )}
      </Popover>
      <Dialog isOpen={isOpen} close={close}>
        <button>Button inside dialog</button>
      </Dialog>
    </>
  );
}

I have a preference for managing the dialog's state outside of the popover as it allows me to render multiple buttons that open different dialogs from within the popover panel but can't understand why it doesn't work. Any help is appreciated!