Hello everyone,

I'm currently working on a Next.js project using the T3 stack and NextAuth for authentication. I'm trying to fetch the session server-side using the getServerAuthSession function provided by T3 and pass it to my NavBar component. However, when I try to log the session in the NavBar component, it's logging as undefined.

Here's the relevant code from my _app.tsx file:

import { getServerAuthSession } from "../server/auth";
import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const session = await getServerAuthSession(ctx);
  return {
    props: { session },
  };
};

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <NavBar session={session}/>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

And here's the NavBar component:

const NavBar: React.FC<{ session: Session | null }> = ({ session }) => {
  console.log("Here is session data:", session);
  // Rest of the NavBar component
};

I've followed the T3 documentation and ensured that my getServerAuthSession function and NavBar component are set up correctly, but the session is still undefined. Any help would be greatly appreciated!

Thank you in advance.