Hydration error using Auth.useUser()

supabase.tsx

import {Auth} from '@supabase/ui';
import styles from '../styles/Home.module.css';
import Meta from '../components/Meta';
import Header from '../components/Header';
import {supabase} from '../lib/initSupabase';

// export async function getStaticProps() {}

const LoginPage = () => {
  const {user} = Auth.useUser();
  console.log({user});
  if (user) {
    return (
      <div className={styles.container}>
        <Meta titlePrefix={`Login`} description={'todo'}></Meta>

        <Header />

        <main className={styles.main}>
          <div
            className='w-full h-full flex flex-col justify-center items-center p-4'
            style={{minWidth: 250, maxWidth: 600, margin: 'auto'}}
          >
            <h1>authorized content goes here</h1>
            <button
              className='btn-black w-full mt-12'
              onClick={async () => {
                const {error} = await supabase.auth.signOut();
                if (error) console.log('Error logging out:', error.message);
              }}
            >
              Logout
            </button>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <Meta titlePrefix={`Login`} description={'todo'}></Meta>

      <Header />

      <main className={styles.main}>
        <div className='w-full h-full flex justify-center items-center p-4'>
          <div>
            <Auth
              supabaseClient={supabase}
              providers={['google', 'github']}
              socialLayout='horizontal'
              socialButtonSize='xlarge'
            />
          </div>
        </div>
      </main>
    </div>
  );

};

export default LoginPage;