Trying to access a specific route but its getting redirected on / home route after deployement on Vercel [duplicate]

I have three routes in React: ‘/’, ‘/login’, and ‘/edit-user’, where the login route is public, and the other two are protected. I’ve created a protected layout component and an authentication handler in React. The authentication handler checks the uid and sets it in session storage. Based on that, we update the isAuthenticated state.

Everything works fine locally, but after deployment, when isAuthenticated is true, and I try to access any private route, it redirects me to the / (home) route.

App.tsx

import { useState } from "react";
import Home from "./pages/Home";
import Auth from "./pages/Auth";
import ProtectedLayout from "./routes/ProtectedLayout";
import AuthenticationHandler from "./components/Auth/AuthenticationHandler";
import Onboarding from "./pages/Onboarding";

const App: React.FC = () => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
  return (
    <Router>
      {/* Handle authentication within the Router context */}
      <AuthenticationHandler setIsAuthenticated={setIsAuthenticated} />

      <Routes>
        {/* Public Route */}
        <Route path="/login" element={<Auth />} />
          
        {/* Protected Layout */}
        <Route element={<ProtectedLayout isAuthenticated={isAuthenticated} />}>
          <Route path="/" element={<Home />} />
          <Route path="/edit-user" element={<Onboarding />} />
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

ProtectedLayout.tsx

interface ProtectedLayoutProps {
  isAuthenticated: boolean | null;
}

const ProtectedLayout: React.FC<ProtectedLayoutProps> = ({ isAuthenticated }) => {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return (
    <div>
      <Outlet />
    </div>
  );
};

export default ProtectedLayout;

AuthenticationHandler.tsx

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

interface Props {
  setIsAuthenticated: (authState: boolean) => void;
}

const AuthenticationHandler: React.FC<Props> = ({ setIsAuthenticated }) => {
  const navigate = useNavigate();

  useEffect(() => {
    const checkAuthentication = () => {
      const urlParams = new URLSearchParams(window.location.search);
      const bbuid = urlParams.get("bbuid");

      if (bbuid) {
        sessionStorage.setItem("bbuid", bbuid);

        navigate(window.location.pathname, { replace: true });

        setIsAuthenticated(true);
      } else if (sessionStorage.getItem("bbuid")) {
        setIsAuthenticated(true);
        
        if (window.location.pathname === "/login") {
          navigate("/", { replace: true });
}      } else {
        setIsAuthenticated(false);
      }
    };

    checkAuthentication();
  }, [navigate, setIsAuthenticated]);

  return null; 
};

export default AuthenticationHandler;

How can I resolve this