Tengo esta aplicación, donde quiero mostrar un botón de cierre de sesión en la navegación cuando el usuario ha iniciado sesión. Pero por alguna razón, el botón solo se muestra después de actualizar la página, no cuando el usuario ha iniciado sesión.

También sucede lo mismo con la actualización del número de carrito (en el mismo componente), solo actualiza el número después de una actualización. Aquí estoy tratando de obtener el número del almacenamiento local. Hice un componente separado para el botón "comprar" ya que lo quiero en todos los artículos.

Necesito ayuda por favor, ¿qué estoy haciendo mal?

Aquí está el componente de navegación:

 function Navigation() { const [loggedIn, setLoggedIn] = useState(JSON.parse(localStorage.getItem("games"))); let history = useHistory(); function logOut() { localStorage.clear('Email', 'Password'); history.push('/') } function getCartItems() { if (localStorage.getItem("games")) { return JSON.parse(localStorage.getItem("games")).length } else { return 0; } }; return ( <div className="navgation_container"> <div className="navigation_cartcontainer"> <img className="navigation_logo" src={logo} alt="logog bits&bots" /> {loggedIn ? ( <div className="navigation_cartimg"> <img className="navigation_cart" src={cart} alt="cart for the page" /> <p className="navigation_numberitems">{getCartItems()}</p> <button className="navigation_logout" onClick={logOut}>Log out</button> </div> ) : ( <div>Test</div> )} </div> </div> ); }