Hi all, in the process of playing around with NextJs and Supabase. Having this consistent issue where i'm getting these hydration errors. I cant see what could possibly be wrong with the way ive structured my code. It seems relatively straight forward, a div with a bunch of inputs and labels in it and its giving me so much problems.

It was originally a <form> element but was having so much problems with it that i ended up just trying to do the most basic thing and it's still throwing me errors


<div className="text-yellow-500 h-[100vh] flex justify-center items-center">
<div className="flex flex-col gap-2 bg-slate-950 p-20">
<h1>Login</h1>
<label htmlFor="">email</label>
<input type="text" name="email" onChange={onChange}/>
<label htmlFor="">password</label>
<input type="password" name="password" onChange={onChange}/>
<button onClick={login} className="bg-white mt-5 ">Login</button>
</div>

It's saying
Warning: Did not expect server HTML to contain a <div> in <div>.

if i remove the outer div the error goes away, but since when are we not allowed to have a div inside a div?

can someone explain to me why this would be happening?