React Router V6 does not match any route except the index '/' using hashRouter

const router = createHashRouter(
  createRoutesFromElements(
    <Route element={<UserContextProvider></UserContextProvider>}>
      <Route element={<App></App>}>
        <Route element={<ProtectedSessionLayout></ProtectedSessionLayout>}>
          <Route path="login" element={<LoginForm></LoginForm>}></Route>
          <Route element={<ProtectedLayout></ProtectedLayout>}>
            <Route path="users" element={<Users></Users>}></Route>
            <Route path="applications" element={<Applications></Applications>}></Route>
            <Route path="notifications" element={<Notifactions></Notifactions>}></Route>
          </Route>
        </Route>
      </Route>
    </Route>
  ),
);

const AppRoutes = () => {
  return <RouterProvider router={router}></RouterProvider>;
};

the issue is faced on localhost, static hostings and cloulds like: vercel, netlify, heroku and etc. If I replace the path of any route to index, react-router will match it, otherwise it will throw NotFoundError

it is noteworthy that by using BrowserRouter the problem will be solved and the routing will working correctly.