Repository: next.js
Issue: Bug: Hydration warning when using zod in client side component
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.7.0
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

### Link to the code that reproduces this issue

https://github.com/JohnGemstone/next-hydration-with-zod  [https://codesandbox.io/p/github/JohnGemstone/next-hydration-with-zod/](https://codesandbox.io/p/github/JohnGemstone/next-hydration-with-zod/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clht9reek000a3b6lyhzr8i0z%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clht9reek000a3b6lyhzr8i0z%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clht9reej00093b6llwoqw9l1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clht9reek000a3b6lyhzr8i0z%2522%252C%2522activeTabId%2522%253A%2522clht9reej00093b6llwoqw9l1%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

### To Reproduce

1. Bootstrap with reproduction-template and add app directory basics
2. Install Zod
3. Create client side component like so:
```tsx
// components/Test.tsx

"use client";
import * as z from "zod";

const foo = z.object({});

const Test = () => {
  return (
    <div>
      <h1>hello world</h1>
    </div>
  );
};

export default Test;
```
4. Add the component to the index of the app directory with a sibling:
```tsx
// app/page.tsx
import Test from "../components/Test";

export default function Home() {
  return (
    <main>
      <Test />
      <div></div>
    </main>
  );
}
```
5. Run dev server and observe the following warning in console:
```
Warning: Did not expect server HTML to contain a <h1> in <div>.
    at div
    at main
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:153:1)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:195:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:361:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:368:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:397:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:404:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:317:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:23:11)
    at body
    at html
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:61:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:20:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:48:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:59:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:24:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:146:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:163:11)
```


### Describe the Bug

I was trying to use react-hook-form with zod validators when I first encountered the error. Narrowing it down to the repo above took some time due to the weird behaviour. e.g. commenting out the sibling div in the index page fixes the warning. The warning doesn't show consistently either, but it appears for me most of the time, especially after a hard refresh.



### Expected Behavior

No warning.

### Which browser are you using? (if relevant)

Version 110.0.5481.177 (Official Build) (arm64)

### How are you deploying your application? (if relevant)

_No response_