I’m having problems with the modal component, to contextualize before I have 2 main components DefaultLayout that receive the standard layout components (sidemenu, header) … and Ecommerce receives the main components (Cards, Images, Buttons, Modals), in page.tsx I render the two components separately like this:

Page.tsx

export default function Home() {
 

  return (
    <>
      <DefaultLayout>
        <ECommerce />
      </DefaultLayout>
    </>
  );
}

When I click on the modal in Ecommerce.tsx, it doesn’t overlay the DefaultLayout, which makes it look ugly. Can anyone help me solve this?

I need the modal to overlap all the components

Ecommerce.tsx

<Dialog>
        <DialogTrigger className="col-end-6" > 
        <Button variant="secondary">
          <FontAwesomeIcon className="mr-2 h-4 w-4" icon={faUserPlus} />
          Cadastrar paciente
        </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Cadastro de paciente</DialogTitle>
            <DialogDescription>
              This action cannot be undone. This will permanently delete your account
              and remove your data from our servers.
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>

I try to use createPortal but unsuccessful. 🙁