React Hydration Error from basic Supabase auth implementation - next.js

Question

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"
}