adding a logout function to my navbar using JWT token?

I am quite new to react and javascript. I am trying to make a dynamic navigation bar that shows certain links if user is logged in or logged out. I want to base it off of if the jwt token is present or not. I am stuck on how to implement a log out functionality to my code that clears the token as so far my boolean conditional doesn’t work as it shows the logged in features if user hasn’t signed up or signed in. I think it is because the token expires in 10 minutes. I am a little confused and would appreciate some direction or review if I am going down the wrong path.

`import "./navbar.css"
import NavLoggedIn from "./navLoggedIn"
import NavPublic from "./navPublic"

const Navbar = () => {
  const token = window.localStorage.getItem("token");
  
  return (
    <>
      { token === null ? <NavPublic /> : <NavLoggedIn /> }  
    </>
  );
};

export default Navbar;

import "./navbar.css"


const NavLoggedIn = () => {
 
  return (
    <>
       <nav className="nav">
      <a href="/" className="site-title">Acebook</a>
        <li>
          <a href="/">profile</a>
        </li>
        <li>
          <a href="/posts">posts</a>
        </li>

        <li>
          <a href="/login">logout</a>
        </li>
    </nav>
    </>
  );
}

export default NavLoggedIn ;

import "./navbar.css"

/* <div>

  <NavPublic>
    <nav className="nav">
        <a href="/" className="site-title">Acebook</a>
        <ul>
            
          <li>
            <a href="/signup">signup</a>
          </li>

          <li>
            <a href="/login">login</a>
          </li>

          <li>
            <a href="/">profile</a>
          </li>

          <li>
            <a href="/posts">posts</a>
          </li>

          
      </ul>
    </nav>
  </ NavPublic>
</ div> */

const NavPublic = () => {
 
  return (
    <>
       <nav className="nav">
        <a href="/" className="site-title">Acebook</a>
        <ul>
            
          <li>
            <a href="/signup">signup</a>
          </li>

          <li>
            <a href="/login">login</a>
          </li>      
      </ul>
    </nav>
    </>
  );
}

export default NavPublic;