Dialog shadcn not showing up as a dialog but just as content

<div className="flex gap-4">
  <Link href="/tasks" className={buttonVariants({ size: "sm" })}>
    Your tasks
  </Link>

  <Dialog>
    <DialogTrigger asChild>
      <Button size="sm" onClick={() => { }}>
        Create list
      </Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>Are you absolutely sure?</DialogTitle>
        <DialogDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </DialogDescription>
      </DialogHeader>
    </DialogContent>
  </Dialog>
</div>

<div className="flex gap-4">
  <Link href="/tasks" className={buttonVariants({ size: "sm" })}>
    Your tasks
  </Link>

  <Dialog>
    <DialogTrigger asChild>
      <Button size="sm" onClick={() => { }}>
        Create list
      </Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>Are you absolutely sure?</DialogTitle>
        <DialogDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </DialogDescription>
      </DialogHeader>
    </DialogContent>
  </Dialog>
</div>

  return (
    <div className="flex h-full">
      <Sidebar />
      {children}
    </div>
  );

  return (
    <div className="flex h-full">
      <Sidebar />
      {children}
    </div>
  );