I am using react-router version ^6.25.1 , I want the user to be redirected to the home page /home if he logged in before i am using firebase-auth I check if the user is logged in via onAuthStateChanged observer provided by firebase if there is a user logged the promise is resolved if not it gets reject i am using a loader function to do this check if i call the loader function in my root “/” element the page keeps loading and I am not redirected however if i do that in other pages such as “/LoginPage” i am able to redirect to the home page /home here is the structure of my routes :

 const router = createBrowserRouter([
     {
      path: "/LoginPage",
      errorElement: <RouteError />,

    loader: async () => {
      const authPromise = new Promise((resolve, reject) => {
        onAuthStateChanged(eCommerceAuth, (user) => {
          // this works fine
          if (user) {
            console.log(user)
            resolve(user)
          }
          else {
            reject(null)
          }
        })

      })
      const authenticatedUser = await authPromise
      console.log(authenticatedUser)
      if (authenticatedUser) return redirect("/home")
      return {}
    }
   
    ,
    element: (
      <Provider store={store}>
        <LoginPage />
      </Provider>
    ),
  },

  {
    path: "/RegistrationPage",
    errorElement: <div>oops something went wrong</div>,
    element: (
      <Provider store={store}>
        <RegistrationPage />
      </Provider>
    ),
  },
  {
    path: "/"
    ,
   // this doesn't redirect 
    loader: async () => {
      const authPromise = new Promise((resolve, reject) => {
        onAuthStateChanged(eCommerceAuth, (user) => {
          if (user) {
            console.log(user)
            resolve(user)
          }
          else {
            reject(null)
          }
        })

      })
      const authenticatedUser = await authPromise
      console.log(authenticatedUser)
      if (authenticatedUser) return redirect("/home")
      return {}
    },

    element: (
      <Provider store={store}>
        <AuthProvider>
          <App />
        </AuthProvider>
      </Provider>
    ),
    errorElement: <RouteError />,

    children: [
      {

        path: "home",
        element: (
          <Provider store={store}>
            <AuthProvider>
              <HomePage />
            </AuthProvider>
          </Provider>
        ),
        children: [
          { index: true, element: <HomePage /> },
          {
            index: true,
            path: "SelectedCategory",
            element: <SelectedCategory />,
          },
        ],
      },
    ],
  },
]);
root.render(
  <RouterProvider
    router={router}
    fallbackElement={<div>i hate routers</div>}
  />,
);```

i replace the onAuthStateChanged oberserver and the  promise with an  object ```const isAuth={user:true}``` and made a condition ```if(isAuth){ redirect("/home")}``` to see if the problem is related to the   onAuthStateChanged  observer but that didn't work  as well i am getting the same behaviour as before