I need your help. I have a React Router Dom(6.10.0) in my React app. It works fine on my local host, but when I deploy it on Vercel, I can’t access the private route, while non-private pages (Welcome, Login, Signup) are available. The home page shows nothing, no error or anything. I have tried all possible solutions, but nothing helped.

import { createBrowserRouter } from "react-router-dom";
import Home from "../pages/Home";
import Login from "../pages/Login";
import SignUp from "../pages/SignUp";
import NotFound from "../pages/NotFound";
import PrivateRoutes from "./PrivateRoutes";
import Welcome from "../pages/Welcome";

export const routes = {
  welcome: "/",
  home: "/home",
  login: "/login",
  signup: "/signup",
  chats: "/chats",
  chat: "/chat/:id",
  notFound: "*",
};

const router = createBrowserRouter([
  {
    path: routes.welcome,
    element: <Welcome />,
  },
  {
    path: routes.login,
    element: <Login />,
  },
  {
    path: routes.signup,
    element: <SignUp />,
  },
  {
    element: <PrivateRoutes />,
    children: [
      {
        path: routes.home,
        element: <Home />,
      },
    ],
  },
  {
    path: routes.notFound,
    element: <NotFound />,
  },
]);

export default router;

import { Navigate, Outlet } from "react-router-dom";
import { routes } from "./Routes";

const PrivateRoutes = () => {
  const token = sessionStorage.getItem("X-Auth-Token");
  console.log(token);
  return token ? <Outlet /> : <Navigate to={`${routes.login}`} />;
};

export default PrivateRoutes;

What can cause this problem?

If I add a path for the private route (but I am not supposed to, I guess), the private route itself is available, but not its child component.