معالجة مشكل protect routes في react router dom v6

السلام عليكم

الرجاء المساعدة في عدم فاعلية الكود التالي

App

function App() {
  return (
    <>
      <Routes>
        <Route 
          path="/" 
          element={ 
            <AppRoute
              redirect='/login'
              user={Auth.auth}
            >
              <Chat/>
            </AppRoute> 
          }
        />
        <Route 
          path="/register" 
          element={ 
            <AppRoute
              redirect='/'
              user={Auth.guest}
            >
              <Register/>
            </AppRoute> 
          }
        />
        <Route 
          path="/login" 
          element={ 
            <AppRoute
              redirect='/'
              user={Auth.guest}
            >
              <Login/>
            </AppRoute> 
          }
        />
        <Route path= "*" element={ <NotFound/> }/>
      </Routes>
    </>
  );
}

AppRoute

const AppRoute = ({ user, children, redirect }) => {
    if (!user) {
      return <Navigate to={redirect} />;
    }
  
    return children;
  };

Auth

const Auth = {

    auth: () => localStorage.getItem('user') !== null,

    guest: () => localStorage.getItem('user') === null,
    
};

مثلما تلاحظون، في صورة عدم وجود مستخدم في ذاكرة المتصفح فإنه يتوجه مباشرة إلى صفحة تسجيل الدخول

إلا أن النتيجة التي تحصلت عليها عكس ذلك

ففي صورة كانت ذاكرة المتصفح فارغة فإنه يتوجه إلى الصفحة الرئيسية 

شكرا على المساعدة