التنقل بين الصفحات باستعمال react router dom v6

السلام عليكم.

أواجه في التنقل بين الصفحات حيث يتوجب علي تحديث الصفحة كلما أردت الحصول على الصفحة المطلوبة

function App() {
    const user = JSON.parse(localStorage.getItem('user'))
    return (
      <Router>
        <Routes>
        <Route 
          path='/' 
          element={user ? <Chat/> : <Navigate to='/login'/>}
        />
          <Route path="/login" element={ !user ? <Login/> : <Navigate to='/' />}/>
          <Route path="/register" element={ !user ? <Register/> : <Navigate to='/login'/> }/>
          <Route path= "/*" element={ <NotFound/> }/>
        </Routes>
      </Router>
  );
}

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

كذلك بعد تسجيل الدخول لا يمككن التنقل لصفحة المحادثة إلا بعد تحديث الصفحة

Login

import React, { useState } from 'react'
import { Card, Input, Button, Form } from 'reactstrap'
import { Link, useNavigate } from 'react-router-dom';
import Error from '../components/Error';
import axios from 'axios'

function Login() {
  const [error, setError] = useState('')

  const navigate = useNavigate();

  const [formData, setFormData] = useState({
      name: '',
      password: ''
  })

  const { name, password } = formData
  const onChange = (e) => {
      setFormData({...formData, [e.target.name]: e.target.value})
  }
  
  const onSubmit = async e => {
    e.preventDefault()  
    axios.post('/api/auth/login', formData)
    .then(res => {
      localStorage.setItem("user", JSON.stringify(res.data));
      navigate("/")
    })
    .catch(error => setError(error.response.data.message))
  }

  return (
    <Card className="auth col-lg-3 col-sm-6">
      <Form onSubmit={onSubmit}>
        <img src="" alt="" width="200" />
        <h5 className="mb-4"> تسجيل الدخول</h5>
        <Error error={error} />
        <Input
          value={name}
          name="name"
          onChange={onChange}
          placeholder="الاسم"
          required
          autoFocus
        />
        <Input
          type="password"
          value={password}
          name="password"
          onChange={onChange}
          placeholder="كلمة المرور"
          required
        />
        <Button color="primary" block className="mb-3">
          {" "}
          تسجيل الدخول{" "}
        </Button>
        <small>
          <Link to="/register">إنشاء حساب جديد</Link>
        </small>
        <p className="m-3 text-muted">&copy; {new Date().getFullYear()}</p>
      </Form>
    </Card>
  );
}

export default Login

Logout

import React, {useEffect} from 'react'
import { Row, DropdownItem, DropdownMenu, DropdownToggle, Nav, UncontrolledDropdown} from "reactstrap";
import Avatar from '../Avatar';
import { Navigate, useNavigate } from 'react-router-dom';

function ChatHeader({ receiver, users }) {
    const navigate = useNavigate()
    // Find Receiver Avatar
    const receiverAvatar = users.find(u=> u._id === receiver?._id)

    // logout
    const logout = () => {
        navigate('/login')
        localStorage.clear()    
    }
    // useEffect(()=>{
        // logout()
    // }, [])
  return (
    <div>
        <Row className="heading m-0">
            <div 
                // onClick={props.toggle}
            >
                <Avatar 
                    src={receiverAvatar?.avatar} 
                />
            </div>
            <div className="text-right">
                <div>{receiver ? receiver.name : ''}</div>
                {/* <small>{status()}</small> */}
           </div>
            <Nav className="mr-auto" navbar>
                <UncontrolledDropdown>
                    <DropdownToggle tag="a" className="nav-link">
                        <i className="fa fa-ellipsis-v" />
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem >تغيير كلمة المرور</DropdownItem>
                        <DropdownItem divider />
                        <DropdownItem onClick={()=>logout()}>تسجيل الخروج</DropdownItem>
                    </DropdownMenu>
                </UncontrolledDropdown>
            </Nav>
        </Row>
    </div>
  )
}

export default ChatHeader

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