I call the getServerSession function inside the getServerSideProps function and return the session I get from there as props, but as long as I have an _app.tsx structure like in the documentation published by NextAuth, the session returns to the index.tsx as undefined. I don't know what I'm doing wrong, but when I add the extra line, I solve the problem. I just want to know what is that

//version in documentation

import { SessionProvider } from "next-auth/react"
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

//The new version where I added the line that redefines pageProps. I don't know why this is needed.

import { SessionProvider } from "next-auth/react"
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  pageProps = { session, ...pageProps}
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

// The index.tsx

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
import { getServerSession } from "next-auth";
import { authOptions } from "./api/auth/[...nextauth]";
import { useSession, signIn, signOut } from "next-auth/react"

type Props = InferGetServerSidePropsType<typeof getServerSideProps>

export default function Page({user,session}: Props) {
  const { data: session2 } = useSession()

  return (
    <div>
      <p>This is server {"session: "+JSON.stringify(session)}</p>
      <p>This is client {JSON.stringify(session2)}</p>
    </div>
  )
}


export const getServerSideProps:GetServerSideProps = (async (context) => {
  const session = await getServerSession(context.req, context.res, authOptions)
  if (!session) {
    return {
      props: {}
    }
  }
  return {
    props: {
      session
    }
  }
})