I am using Next js client component, @shadcn/ui and React portal to conditionally render a dialog/modal (using useState) when clicked on a button. I am getting the correct state of show in console but the modal is not appearing. Any help?

"use client";

export default function DetailForm() {
  const [show, setShow] = useState<boolean>(false);

  return (
    <>
      {
        (show == true)
        ? createPortal(
            <Dialog>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Are you sure you want to delete this?</DialogTitle>
                </DialogHeader>
                <DialogFooter>
                  <Button onClick={() => setShow(false)}>Cancel</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>,
            document.body
        )
        : null
      }
      <div className="...">
          <Button onClick={() => setShow(true)}>Delete</Button>
      </div>
      <form className="...">
          // rest of code
      </form>
    </>
  );
}

Thanks for reading.