I went through all the other stackoverflow but I still couldn’t figure out this error.

This is my code structure.

This is my App.jsx

function App() {
  return (
    <Provider store={store}>
      <ChakraProvider theme={chakraConfig}>
        <AppControlsProvider>
          <QueryClientProvider client={queryClient}>
            <AppRoutes />
          </QueryClientProvider>
        </AppControlsProvider>
      </ChakraProvider>
    </Provider>
  );
}

And this how I am defining my routes

const SessionDoesNotExistRoutes = () => {
  return (
    <Routes>
      <Route path="/*" element={<AuthRoutes />} />
    </Routes>
  );
};

const SessionExistsRoutes = () => {
  return (
    <Routes>
      <Route
        path={'/'}
        element={<Navigate to={'/dashboard'} replace={true} />}
      />
      <Route path="/dashboard" element={<DashboardRoutes />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

const AppRoutes = () => {
  const { isAppLoaded } = React.useContext(AppControlsContext);
  const isLoggedIn = useSelector((state) => state.user.isLoggedIn);
  if (isAppLoaded) {
    return (
      <BrowserRouter>
        <Routes>
          <Route
            path="/*"
            element={
              isLoggedIn ? (
                <SessionExistsRoutes />
              ) : (
                <SessionDoesNotExistRoutes />
              )
            }
          />
        </Routes>
      </BrowserRouter>
    );
  }
  return null;
};

export default AppRoutes;

In Signup Component of auth routes, I am getting this error

const AuthRoutes = () => {
  return (
    <Routes>
      <Route path="/signup" element={<Signup />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  );
};

export default AuthRoutes;

Singup.jsx

const Signup = () => {
  const navigate = useNavigate();

my Signup component seems to be nexted well inside browser routes, so why I am getting this error?