Reactjs + Supertokens How to handle showing different navbars once user is signed in

Question

The issue I am having is how to check if the user is logged in and show them another navbar instead of the navbar for everyone who is not logged in. I am using supertokens to verify my users, this is my app.tsx.

import { SuperTokensConfig, PreBuiltUIList } from './database/auth/supertoken';
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import { Routes, BrowserRouter as Router, Route } from "react-router-dom";
import { getSuperTokensRoutesForReactRouterDom } from 'supertokens-auth-react/ui'
import { SessionAuth, SessionContext } from "supertokens-auth-react/recipe/session"

//Components
import Navbar from './components/nav/Navbar';
import NavbarAuth from './components/nav/NavbarAuth';
//Free Routes
import Home from './routes/free/Home';
//Protected User Routes
import Profile from './routes/user/Profile';
//Protecte Admin Routes


SuperTokens.init(SuperTokensConfig);

function App() {
  //Here
  const check = SessionContext;
  return (
<SuperTokensWrapper>
  <div className='App app-container'>
    <Router>
      {check ? <Navbar /> : <NavbarAuth />}

      <Routes>
        {/* This shows the login UI on "/auth" route */}
        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"), PreBuiltUIList)}

        {/* Unprotected route */}
        <Route path="/" element={<Home />} />
        {/* Unprotected route */}

        {/* Protected route Users */}
        <Route
          path="/profile" element={
            /* This protects the "/" route so that it shows
          <Home /> only if the user is logged in.
          Else it redirects the user to "/auth" */
            <SessionAuth>
              <Profile />
            </SessionAuth>
          } />
        {/* Protected route Users */}

      </Routes>
    </Router>
  </div>
</SuperTokensWrapper>
  );
}

export default App;

I tried to check the verification of the user using SessionContext, but it doesnt seem to work.