Hydration error while using helper

profile.tsx

import {NextPage} from 'next';
import styles from '../styles/Home.module.css';
import Meta from '../components/Meta';
import Header from '../components/Header';
import Footer from '../components/Footer';
import {withPageAuth} from '@supabase/auth-helpers-nextjs';

export const getServerSideProps = withPageAuth({redirectTo: '/login'});

const Profile: NextPage = ({user}) => {
  return (
    <div className={styles.container}>
      <Meta titlePrefix={`Login`} description={'todo'}></Meta>

      <Header />

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome back!</h1>
        <p>
          <pre>{JSON.stringify(user)}</pre>
        </p>
      </main>
      <Footer />
    </div>
  );
};

export default Profile;