React Hydration Error from basic Supabase auth implementation

After implementing the basic authentication experience from supabase, I'm trying to create a simple page that's only available to authenticated users and shows their user data.

I'm consistently faced with a React Hydration Error despite implementing exactly what the docs say.

The error occurs when logged in. When logged out I'm successfully routed to /wip

Here's my simple page code.

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

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

const Profile: NextPage = ({user}) => {
  return (
    <div className={styles.container}>

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

export default Profile;

Package.json

"dependencies": {
  "@supabase/auth-helpers-nextjs": "^0.2.8",
  "@supabase/auth-helpers-react": "^0.2.4",
  "@supabase/supabase-js": "^1.35.7",
  "@supabase/ui": "^0.36.5",
  "next": "12.3.1",
  "pocketbase": "^0.7.1",
  "react": "18.2.0",
  "react-dom": "18.2.0"
}