Reactjs – Authentication in react with react-router-v6 and zustand

AppRoutes:

function AppRoutes(): JSX.Element {
  return (
    <Routes>
      <Route path="/" element={<Auth />} />

      <Route element={<RequiredAuth />}>
        <Route path="/home" element={<Home />} />
      </Route>
    </Routes>
  );
}

private routes checks

import { Navigate, Outlet } from "react-router-dom";
import useAuth from "./hooks/useAuth";

const RequiredAuth = () => {
  const { user } = useAuth();

  console.log("USERAUTH", user);
  return user ? <Outlet /> : <Navigate to="/" replace />;
};
export default RequiredAuth;

useAuth Hook with zustand store

import { create } from "zustand";
import axios, { AxiosResponse } from "axios";
import apiSecure, { api } from "../libs/axios";

type user = {
  id: string;
};

interface useAuthStore {
  user: user | null;
  signIn: (username: string, password: string) => Promise<void>;
  fetchCurrentUser: () => Promise<void>;
}
interface AuthResponse {
  code: number;
  error: boolean;
  message: string;
  data: {
    email: string;
    id: string;
    name: string;
    token: string;
    username: string;
  };
  errors?: [];
}

const useAuth = create<useAuthStore>((set) => ({
  user: null,
  signIn: async (username: string, password: string): Promise<void> => {
    // login process
  },
  fetchCurrentUser: async (): Promise<void> => {
    try {
      const response: AxiosResponse<AuthResponse> = await apiSecure.get(
        `/auth/currentuser`
      );

      const userData = response.data.data;

      set({ user: { id: userData.id } });
      console.log("SETUP", { id: userData.id });
    } catch (error: unknown) {
      // Handle authentication errors
      
    }
  },
}));

export default useAuth;

function App(): JSX.Element {
  const { fetchCurrentUser, user } = useAuth();
  console.log(user);

  useEffect(() => {
    async function auth() {
      await fetchCurrentUser();
    }
    auth();
  }, [fetchCurrentUser]);

  // useEffect(() => {}, [fetchCurrentUser])
  return (
    <>
      <AppRoutes />
    </>
  );
}

export default App;

I’m trying to build authentication with react-router-v6 and have used zustand for state management and verify user using jwt token for which calling fetchcurrentuser (/auth/currentuser api) and updating user state in useAuth with zustand,
and protected routes /home with RequiredAuth but it’s accessible even if user verified and state updated successfully, or can say updated state with zustand is updated in requiredAuth function.

it’s always redirect / what’s wrong i am doing?

Please help, I’m relative new to react and this would be much appreciated. Thanks in advance!