Repository: ui
Issue: [bug]: Initially opened dialog causes hydration error
Labels: bug

### Describe the bug

Using a [Dialog](https://ui.shadcn.com/docs/components/dialog) component, which is initially opened, throws a hydration exception.

![image](https://github.com/shadcn-ui/ui/assets/14905030/7d572963-209a-4466-b986-bd4375d22a5c)

![image](https://github.com/shadcn-ui/ui/assets/14905030/3cd29cd3-2acf-41c3-9213-ea678e8874a4)

![image](https://github.com/shadcn-ui/ui/assets/14905030/c978726a-46e6-454e-ae58-db4f1ab390ac)


### Affected component/components

Dialog

### How to reproduce

**1. Initiate latest next project:**

```sh
npx create-next-app@latest dialog-bug-shadcn --typescript --tailwind --eslint
cd  dialog-bug-shadcn
```

**2. Initiate shadcn:**

```sh
npx shadcn-ui@latest init
```

**3. Add Dialog component:**

```sh
npx shadcn-ui@latest add dialog
```

**4. Use the `Dialog` component with `open` property set to `true`:**

```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export default function Home() {
  return (
    <div className="p-4">
      <Dialog open={true} modal={false}>
        <DialogContent>
          <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>
  );
}
```

**5. Run the next dev server:**

```sh
npm run dev
```





### Codesandbox/StackBlitz link

https://stackblitz.com/edit/stackblitz-starters-c11bus

### Logs

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Expected server HTML to contain a matching `<div>` in `<div>`.

```html
<Home>
  <div>
  ^^^^^
    <$5d3850c4d0b4e6c7$export$3ddf2d174ce01153>
      <Provider>
        <_c1>
          <$5d3850c4d0b4e6c7$export$dad7c95542bacce0>
            <Provider>
              <$921a889cee6df7e8$export$99c2b779aa4e8b8b>
                <eval>
                  <eval>
                    <eval>
                      <eval>
                        <eval>
                          <$921a889cee6df7e8$export$99c2b779aa4e8b8b>
                            <eval>
                              <eval>
                                <eval>
                                  <eval>
                                    <eval>
                                      <eval>
                                        <eval>
                                          <eval>
                                            <div>
```

Callstack

```log
throwOnHydrationMismatch
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (6981:1)
tryToClaimNextHydratableInstance
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7016:1)
updateHostComponent$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (16621:1)
beginWork$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18503:1)
HTMLUnknownElement.callCallback
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (20565:1)
Object.invokeGuardedCallbackImpl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (20614:1)
invokeGuardedCallback
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (20689:1)
beginWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26949:1)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25748:1)
workLoopConcurrent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25734:1)
renderRootConcurrent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25690:1)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24504:1)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (256:1)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (225:1)
MessagePort.performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:1)
```


### System Info

```bash
Sytem:

OS: macOS 14.4.1 23E224 arm64
Host: MacBookPro18,3
Kernel: 23.4.0
CPU: Apple M1 Pro
GPU: Apple M1 Pro

Browser:

Arc
Version 1.40.0 (49176)
Chromium Engine Version 124.0.6367.79
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues