I use NextAuth and I have a layout which looks like this

export default async function CashierLayout({ children }: PropsWithChildren) {
  const session = await getServerSession(authOptions);

  if (session?.user && session?.auth) {
    return (
      <>
        <div
          className="container mx-auto justify-center p-5 max-w-[1280px]">
          <CashierNavigation />
          <hr className="w-1/2 mx-auto mb-4" />
          {children}
        </div>
      </>
    );
  }

  const urlSearchParams = new URLSearchParams({});
  urlSearchParams.append("modal", "login");
  await redirect(`/?${urlSearchParams}`);
}

However, the deposits/withdrawal pages under this route using this layout aren't working correctly.
What happens is, when a user loads the page and clicks "cashier" they are shown a login modal, however if the user logs in and clicks cashier, it doesn't detect their logged in and so still shows the login modal. However, if the user hard refreshes, they're not able to navigate to the page.

Does anyone know why this happens? It was my assumption that making a call to cookies() or headers() under next/headers would force this to be a dynamic call, could the issue be with route prefetching?