Passkey login neither redirects to provided callbackURL nor re-renders UI untill manual refresh

import { NextResponse } from "next/server";
import { getSessionCookie } from "better-auth/cookies";

export async function middleware(request) {
  const sessionCookie = getSessionCookie(request, {
    cookiePrefix: "eat-food-ai"
  });

  if (!sessionCookie) {
    const callbackUrl = encodeURIComponent(request.nextUrl.pathname + request.nextUrl.search);
    return NextResponse.redirect(new URL(`/signin?callbackUrl=${callbackUrl}`, request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/nutritionix", "/dashboard", "/user/:path*", "/app/:path*"]
};

const [isPending, setIsPending] = useState(false);
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl") || "/";

  const handlePasskeySignIn = async () => {
    try {
      setIsPending(true);
      const data = await authClient.signIn.passkey({
        callbackURL: callbackUrl,
        fetchOptions: {
          onSuccess: async () => {
            setIsPending(false);
          }
        }
      });

      if (data?.error) {
        triggerToast(
          data?.error.message === "auth cancelled"
            ? "Passkey login took too long or was cancelled. Please try again."
            : "There was an issue with your login.",
          "error"
        );
        setIsPending(false);
      }
    } catch (error) {
      setIsPending(false);
      triggerToast("There was an issue with your login.", "error");
    }
  };