Im getting 2 errors:
- Error: Hydration failed because the initial UI does not match what was rendered on the server.
- Warning: Expected server HTML to contain <div> in <div>

Im sure my HTML structure is correct, im using shadcn/ui to create a modal, if i comment out the modal, the errors dissapear.

modal.tsx

"use client";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

interface Props {
  title: string;
  description: string;
  isOpen: boolean;
  onClose: () => void;
  children?: React.ReactNode;
}

export default function Modal({
  title,
  description,
  isOpen,
  onClose,
  children,
}: Props) {
  const onChange = (open: boolean) => {
    if (!open) {
      onClose();
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        <div>{children}</div>
      </DialogContent>
    </Dialog>
  );
}

page.tsx
"use client";

import Modal from "@/components/ui/modal";

export default function SetupPage() {
  return (
    <div className="p-4">
      <Modal title="test" description="test" isOpen onClose={() => {}}>
        Test
      </Modal>
    </div>
  );
}