I am working with node.js and react.js to do a simple login and log out function. the problem is that when I want to log out from the website, the navbar does not turn into the log in after I logout. It removes my details from local storage but my navbar still remains the same after I log out. sorry for the bad code, I am still new to this

App.js

```js
import React from 'react';
import "./App.css"
import Navbar from './components/Navbar';
import { Switch, Route} from 'react-router';
import { BrowserRouter } from 'react-router-dom'
import Home from './components/pages/HomePage/Home'
import Footer from './components/pages/Footer/Footer';
import Service from './components/Service';

import Info from './components/pages/Info/Info';
import infoMs from './components/pages/Info/infoMs';
import Login from './components/Login';
import Register from './components/Register';
import Profile from './components/Profile';

function App()
{
  return(
    <BrowserRouter>
      <Navbar />
      <Switch>

        <Route exact path={["/", "/home"]} component={Home}/>
        <Route path='/service' component={Service}/>
        <Route path='/phua' component={Info}/>
        <Route path='/foong' component={infoMs}/>
        <Route exact path='/login' component={Login}/>
        <Route exact path="/register" component={Register} />
        <Route exact path="/profile" component={Profile} />

      </Switch>

      <Footer />
    </BrowserRouter>
  );

}

export default App;

```

auth-service.js

```js
import axios from "axios";

const API_URL = "http://localhost:8080/api/auth/";

const register = (username, email, password) => {
  return axios.post(API_URL + "signup", {
    username,
    email,
    password,
  });
};

const login = (username, password) => {
  return axios
    .post(API_URL + "signin", {
      username,
      password,
    })
    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      }

      return response.data;
    });
};

const logout = () => {
  localStorage.removeItem("user");

};

const getCurrentUser = () => {
  return JSON.parse(localStorage.getItem("user"));
};

export default {
  register,
  login,
  logout,
  getCurrentUser,
};

```

navbar.js

```js
import React, { useState, useEffect  } from 'react'
import {Link} from 'react-router-dom'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
import './Navbar.css'
import {IconContext} from 'react-icons/lib'
import AuthService from "../services/auth-service";

export const img1 = require('./images/kdu.png');

function Navbar  ()  {

    const [currentUser, setCurrentUser] = useState(undefined);

    useEffect(() => {
      const user = AuthService.getCurrentUser();

      if (user) {
        setCurrentUser(user);

      }
    }, []);

    const logOut = () => {
      AuthService.logout();

    };

    const [click,setClick]= useState(false);
    const [button,setButton]= useState(true)

    const handleClick = () => setClick(!click);
    const closeMobileMenu = () => setClick(false)

    const showButton = () => {
        if (window.innerWidth <= 960){
            setButton(false)
        } else {
            setButton(true) 
        }
    };

    useEffect(() => {
        showButton();

      }, []);
    window.addEventListener('resize',showButton);

    return (

        <>
        <IconContext.Provider value ={{color: "#fff"}}>
        <nav className='navbar'>
          <div className='navbar-container container'>
            <Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
              <img src="/images/Logo-WHITE.png" 
              alt="UOWKDU Logo" width="35%" height="85%"  className='navbar-icon' />

            </Link>
            <div className='menu-icon' onClick={handleClick}>
              {click ? <FaTimes /> : <FaBars />}
            </div>
            <ul className={click ? 'nav-menu active' : 'nav-menu'}>
              <li className='nav-item'> 
                <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                  Home
                </Link>
              </li>
              <li className='nav-item'>
                <Link
                  to='/service'
                  className='nav-links'
                  onClick={closeMobileMenu}
                >
                  Services
                </Link>
              </li>

              <li className='nav-item'>

                <Link
                  to='/service'
                  className='nav-links'
                  onClick={closeMobileMenu}
                >
                  About Us
                </Link>
              </li>

                {currentUser ? (
                  <div className="container-Current">
                    <li className="nav-btn">
                        <Link to={'/profile'} className='btn-link' >
                          <Button buttonStyle='btn--outline' >{currentUser.username}</Button>
                        </Link>
                    </li>
                   <li className='nav-btn'>   
                        <Link to='/login' className='btn-link' onClick={logOut}>
                          <Button buttonStyle='btn--outline' >LogOut</Button>
                        </Link>
                    </li> 
                  </div>
                ) : (
                  <div className="container-Current">
                    <li className="nav-btn">
                    <Link to={'/login'} className='btn-link' >
                      <Button buttonStyle='btn--outline' >Login</Button>
                    </Link>
                    </li>
                  </div> 
            )}

                <li className='nav-btn'>
                      {button ? (
                        <Link to='/sign-up' className='btn-link'>
                          <Button buttonStyle='btn--outline' >SIGN UP</Button>
                        </Link>
                      ) : (
                        <Link to='/sign-up' className='btn-link' onClick={closeMobileMenu}>
                          <Button
                            buttonStyle='btn--outline'
                            buttonSize='btn--mobile'
                          >
                            SIGN UP
                          </Button>
                        </Link>
                      )}
                    </li>

            </ul>
          </div>
        </nav>
        </IconContext.Provider>
        </>
    )
}

export default Navbar

```

[![enter image description here](https://i.stack.imgur.com/ymEKl.png)](https://i.stack.imgur.com/ymEKl.png)
after when I log out
[![enter image description here](https://i.stack.imgur.com/BtrAG.png)](https://i.stack.imgur.com/BtrAG.png)