How can I conditionally render a React component if a sessionStorage variable does not exist in Next.js?

I have an <Authenticated> component that is used to render all of my authenticated routes. I want to prevent rendering the page until I have checked a token stored in sessionStorage.

'use client';

export const Authenticated = ({ children }) => {
  const token = typeof window !== 'undefined' ? sessionStorage.getItem('token') : null;

  if (!token) {
    return <></>;
  }

  return (
    <main>{children}</main>
  );
}

This works but I get this hydration error:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Is there a better way to do this?