Rendered more hooks than during the previous render | Next.js Server Component | next-auth

Question

I am using Next.js 14 with App router. And next-auth as auth-mechanism.

This is my Server component.

/@app/(dashboard)/page.tsx

import { AdminDashboardPage } from "@/features/admin/dashboard/AdminDashboardPage";
import PartnerDashboardPage from "@/features/partner/dashboard/PartnerDashboardPage";
import VenueOwnerDashboardPage from "@/features/venueOwner/dashboard/VenueOwnerDashboardPage";
import { routes } from "@/routes";
import { getCurrentUser } from "@/services/auth/getCurrentUser";
import { redirect } from "next/navigation";

export default async function Page() {
  const currentUser = await getCurrentUser();

  if (!currentUser) redirect(routes.auth.signin);

  if (currentUser.role === "NEW_USER") redirect(routes.onboarding);

  if (currentUser.role === "ADMIN") {
    return <AdminDashboardPage />;
  }

  if (currentUser.role === "PARTNER") {
    // This line is causing the error
    if (!currentUser.isApproved) redirect(routes.awaitingApproval);

    return <PartnerDashboardPage />;
  }
  if (currentUser.role === "VENUE_OWNER") {
    // This line is causing the error
    if (!currentUser.isApproved) redirect(routes.awaitingApproval);

    return <VenueOwnerDashboardPage />;
  }
}

getCurrentUser.ts

import { auth } from "@/services/auth";

export const getCurrentUser = async () => {
  const session = await auth();

  return session?.user;
};

Error

Uncaught Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (react-dom.development.js:11435:15)
    at updateMemo (react-dom.development.js:12613:14)
    at Object.useMemo (react-dom.development.js:13563:16)
    at useMemo (react.development.js:2537:21)
    at Router (app-router.js:232:59)
    at renderWithHooks (react-dom.development.js:11121:18)
    at updateFunctionComponent (react-dom.development.js:16290:20)
    at beginWork$1 (react-dom.development.js:18472:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:20565:14)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:20614:16)
    at invokeGuardedCallback (react-dom.development.js:20689:29)
    at beginWork (react-dom.development.js:26949:7)
    at performUnitOfWork (react-dom.development.js:25748:12)
    at workLoopSync (react-dom.development.js:25464:5)
    at renderRootSync (react-dom.development.js:25419:7)
    at recoverFromConcurrentError (react-dom.development.js:24597:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:24542:26)
    at workLoop (scheduler.development.js:256:34)
    at flushWork (scheduler.development.js:225:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)

I understand the error which is caused if any component conditionally renders any hooks. But here I am not getting what is happening.

if (!currentUser) redirect(routes.auth.signin); & if (currentUser.role === "NEW_USER") redirect(routes.onboarding); These lines work.

But if (!currentUser.isApproved) redirect(routes.awaitingApproval); lines are producing this error.

Please help me to understand what's going on!

Here is the log of currentUser

{
  name: '',
  email: '[email protected]',
  image: null,
  id: 'clyk65th600015b05jzmvd8m5',
  role: 'VENUE_OWNER',
  isApproved: false
}