Error with Hydration integrating with Next 13

[Nicolás Ian Rozenberg]

Affected versions of the core, bridge, and theme packages you are aware of.

"next": "^13.4.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"uniforms": "^4.0.0-alpha.5",
"uniforms-bootstrap5": "^4.0.0-alpha.5",
"uniforms-bridge-zod": "^4.0.0-alpha.5",
"uniforms-semantic": "^4.0.0-alpha.5"

On my page.tsx I have

import React from 'react';
import Image from 'next/image'
import * as z from "zod"
import { AutoForm } from "uniforms-semantic"
import ZodBridge from "uniforms-bridge-zod"

const schema = z.object({
  name: z.string()
});

const bridge = new ZodBridge({ schema });

export default function Home() {
  return (
    <AutoForm schema={bridge} submit={model=>console.log(model)}/>
  )
}

However, when running my app, I'm getting this error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <form>.

[Ernest Teluk]

I tested it out, and it's not the problem of uniforms. This is because the next 13 somehow runs the ComponentWillUnmount, and the component render unmounted (BaseForm line 92-105). And another thing is the error occurs only on the dev version when you run the production build. There is no error. Link to codesandbox

[Nicolás Ian Rozenberg]

Thank you for your reply @ErnestTeluk !