How do I hide/unhide React link without refreshing my webpage?

Question

I've created 4 links in Header. Home, Todos, Login, Logout. Here is the thing what I want

1. Home, Todos and Logout links are only available when user is logged in.

I have used sessionStorage to check whether user is logged in or not and it works fine. The Problem is that after login I need to refresh the webpage to Unhide the Home, Todos and Logout. How can I Unhide them without refreshing my webpage. Means after I logged in I still need to refresh my page and I don't like that. Here is the sample of my code

class AuthenticationService {
      successLogin(username, password) {
        console.log("Register Successfull");
        sessionStorage.setItem("authenticatedUser", username);
      }
      successLogout() {
        sessionStorage.removeItem("authenticatedUser");
      }
      isUserLoggedIn() {
        let user = sessionStorage.getItem("authenticatedUser");
        if (user === null) {
          return false;
        } else {
          return true;
        }
      }
    }
    export default new AuthenticationService();

Header.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import AuthenticationService from "../Security/AuthenticationService";

class Header extends Component {
  render() {
    const isUserLoggedIn = AuthenticationService.isUserLoggedIn();
    console.log(isUserLoggedIn);
    return (
      <header>
        <nav className="navbar navbar-expand-md navbar-dark bg-dark">
          <ul className="navbar-nav">
            {isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/welcome/jarvis">
                  HOME
                </Link>
              </li>
            )}
            {isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/todos">
                  Todos
                </Link>
              </li>
            )}
          </ul>
          <ul className="navbar-nav navbar-collapse justify-content-end">
            {!isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/login">
                  Login
                </Link>
              </li>
            )}
            {isUserLoggedIn && (
              <li>
                <Link
                  className="nav-link"
                  to="/logout"
                  onClick={AuthenticationService.successLogout}
                >
                  Logout
                </Link>
              </li>
            )}
          </ul>
        </nav>
      </header>
    );
  }
}

export default Header;

LoginSuccess

loginResponse = () => {
    if (this.state.username === "jarvis" && this.state.password === "jarvis") {
      this.setState({ loginStatus: true });
      AuthenticationService.successLogin(
        this.state.username,
        this.state.password
      );
      this.props.history.push(`/welcome/${this.state.username}`);
    } else {
      this.setState({ loginStatus: false });
    }
  };

Answer 1

Set isUserLoggedIn by reading the state, don't directly access AuthenticationService.