Can someone tell me why i get an hydration Error on this?
<main className="font-light">
<div className="mb-2">Logo.(REPLACE)</div>
<h1 className="text-2xl mb-2">{t('header')}</h1>
<div className="flex text-md">
<p className="mr-1">{t('isregistered')}</p>
<div className="text-blue-600 cursor-pointer hover:underline">
<a href="/signin">{t('login')}.</a>
</div>
</div>
<div className="mt-4">
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label className="ml-1">Email</Label>
<Input type="email" placeholder="Email" />
</div>
<div className="grid w-full max-w-sm items-center gap-1.5 mt-3">
<Label className="ml-1">Email</Label>
<Input type="email" placeholder="Email" />
</div>
<div className="grid w-full max-w-sm items-center gap-1.5 mt-3">
<Label className="ml-1">Email</Label>
<Input type="email" placeholder="Email" />
</div>
<div className="grid w-full max-w-sm items-center gap-1.5 mt-3">
<Label className="ml-1">Email</Label>
<Input type="email" placeholder="Email" />
</div>
</div>
<Button className="w-full h-10 mt-4">{t('createaccount')}</Button>
<div className="flex mt-8">
<p className="line w-1/2 h-px bg-black" />
<p className="inline text-sm mx-3 -mt-[10px]">{t('or')}</p>
<p className="line w-1/2 h-px bg-black" />
</div>
</main>