I started learning NextJS 14 with Supabase, but for some reason even though i'm using 'use client', i'm getting hydration errors.

I have a fairly simple page:

'use client';

import {supabase} from "@/src/lib/supabase";
import {useState} from "react";


export default function Login() {

    const [data, setData] = useState<{
        email: string, password: string,
    }>({
        email: '',
        password: ''
    })
    const login = async () => {
        console.log(data.email)
        console.log(data.password)
        try {

            let {data: dataUser, error} = await supabase.auth.signUp({
                email: data.email,
                password: data.password
            })

            if (dataUser) console.log(dataUser)

        } catch (error) {
            console.log(error)
            console.log('aaya')
        }
    }

    const handleChange = (e: any) => {
        const {name, value} = e.target;
        setData((prev: any) => ({
            ...prev,
            [name]: value,
        }))
    }
    return <div className='container mx-auto w-[400px]'>
        <div className='grid'>
            <label>Email</label>
            <input
                type='text'
                name='email'
                value={data?.email}
                onChange={handleChange}
            />
        </div>
        <div className='grid'>
            <label>Password</label>
            <input
                type='password'
                name='password'
                value={data?.password}
                onChange={handleChange}
            />
        </div>
        <div>
            <button onClick={login}>Sign Up</button>
        </div>
    </div>

}

What could be the issue? Thanks!