Cannot read properties of undefined (reading 'secret') at unstable_getServerSession

_app.js

import "bootstrap/dist/css/bootstrap.min.css";
import { SessionProvider } from "next-auth/react";
import Layout from "../components/Layout";
import "../styles/globals.css";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  );
}

export default MyApp;

profile.js

import { unstable_getServerSession } from "next-auth/next";
import { authOptions } from "./api/auth/[...nextauth]";
import { useSession } from "next-auth/react";
import axios from "axios";
import AddUpdateProfile from "../components/ProfileComponents/AddUpdateProfile";
import styles from "../styles/Profile.module.css";

const profile = ({ userData }) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const { data: session } = useSession();

  if (typeof window === "undefined") return null;

  if (session) {
    return (
      <div className={styles.profile}>
        <AddUpdateProfile />
      </div>
    );
  }
  return <p>Access Denied</p>;
};

export default profile;

export async function getServerSideProps(context) {
  const session = await unstable_getServerSession(
    context.req,
    context.res,
    authOptions
  );
  if (!session) {
    return {
      redirect: {
        destination: `/api/auth/signin/callbackUrl=${process.env.LOCAL_APP_URL}/profile`,
        permanent: false,
      },
    };
  } else {
    const res = await axios.get(
      `${process.env.NEXT_PUBLIC_LOCAL_APP_URL}/api/user`
    );
    return {
      props: {
        session,
        userData: res.data,
      },
    };
  }
}

[...nextauth.js]

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
import clientPromise from "../../../lib/mongodb";

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: MongoDBAdapter(clientPromise),
  session: {
    strategy: "jwt",
  },
  secret: process.env.JWT_SECRET,
  jwt: { encryption: true },
  callbacks: {
    async jwt({ token, account, user }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      session.user.id = token.id;
      return session;
    },
  },
});

Hi all, this is a simple nextjs app, here i'm trying to get session, But i'm facing an error as "Cannot read properties of undefined (reading 'secret')". I'm using google and github oAuth in this using next-auth library, below is the image pasted about the error I'm facingenter image description here