Micrsoft Authentication library not working properly for hashed route with tanstack router

import { createFileRoute, redirect } from "@tanstack/react-router";
export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context, location }) => {
    if (!context.auth.getActiveAccount()) { // Here this is the condition change for the auth file.
      throw redirect({
        to: "/login",
        search: {
          // Use the current location to power a redirect after login
          redirect: location.href
        }
      });
    }
  }
});

import { Button } from "@/components/ui/button";
import { UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute("/_auth/login")({
  component: RouteComponent
});
function RouteComponent() {
  const { instance } = useMsal();
  async function handleLogin() {
    try {
      await instance.loginPopup();
      //navigating them to homepage:
      window.location.assign("/");
    } catch (err) {
      console.error("Login error", err);
    }
  }
  return (
    <UnauthenticatedTemplate>
      <Button onClick={handleLogin}>Login</Button>
    </UnauthenticatedTemplate>
  );
}