Сбрасывается значение state при обновлении страницы React JS

При обновлении страницы сбрасывается значение isAuth.

Я использовал createContext что бы isAuth был доступен в Navbar , но при обновлении страницы (отправка данных на сервер) мой Navbar меняется , потому что isAuth сбрасывается на false.

Как такого избежать?

navbar

import React,{useContext} from "react";
import {Link} from 'react-router-dom';
import { AuthContext } from "../../../context";
const Navbar = () => {
    const { isAuth,setIsAuth} = useContext(AuthContext)
    console.log(isAuth)
    
    try {
        const getUser = localStorage.getItem('username');
        var user = JSON.parse(getUser).username;
    } catch {
        var user = "Гость, Войдите или зарегестрируйтесь!!!"
    };
    
    return (
        <div className="navbar" >
            <div className="navbar__links" >
                <Link to="/" style={{ padding: 20 }}>Главная Страница</Link>
                {isAuth != false
                    ? <Link to="/logout" style={{ padding: 20 }}>Выход</Link>
                    : <Link to="/login" style={{ padding: 20 }}>Вход</Link>
                }
                {isAuth != false
                    ? <a>{user}</a>
                    : <Link to="/register" >Регистрация</Link>
                }

            </div>
        </div>
    );
};



export default Navbar;

index.js (где определен createContext)

import { createContext } from "react";


export const AuthContext = createContext(null);

App.js

import {React, useState} from 'react';
import {BrowserRouter, Route, Routes, Navigate} from 'react-router-dom';
import './App.css';
import RegisterPage from './pages/register';
import Main from './pages/main';
import Login from './pages/login';
import Navbar from './components/UI/Navbar/Navbar';
import LogOut from './components/Logout';
import { AuthContext } from './context/index';

function App(){
  const [isAuth, setIsAuth] = useState(false);
  return (
    <AuthContext.Provider value={{
      isAuth,
      setIsAuth
      }}>
    <BrowserRouter>
      <Navbar />
      <Routes>  
          <Route path='/register' element={<RegisterPage />} />
          <Route path='/' element={<Main/>} />
          <Route path='/login' element={<Login />} />
        <Route path='/logout' element={<LogOut/>} />
          <Route path='*' element={<Navigate to='/'/>}/>  
      </Routes> 
      </BrowserRouter>
    </AuthContext.Provider>
  );
};
export default App;

LoginForm

import React, { useState ,useContext} from "react"; 
import MyButton from "./UI/button/MyButton";
import MyInput from "./UI/input/MyInput";
import TodoService from "./API/ToDoService";
import { AuthContext } from "../context/index";

const LoginForm = ()  => {
    const [username, setUsername] = useState({ username: '' });
    const [password, setPassword] = useState({ password: '' });
    const [token, setToken] = useState('');
    const { isAuth, setIsAuth } = useContext(AuthContext);
    console.log(isAuth)

    function Login(e) {
        e.preventDefault();
        const log_data = {
            username: username.username,
            password: password.password
        };
        const log = TodoService.logUser(log_data)
        log.then((result) => {
        setToken(result)
        setIsAuth(true);
        console.log(isAuth)
        localStorage.setItem('username', JSON.stringify(username));

        });
    };


    localStorage.setItem('token', JSON.stringify(token.auth_token));

    return (
        <form>
            <MyInput type='text' placeholder='Логин' value={username.username} onChange={e => setUsername({username:e.target.value})} />
            <MyInput type='text' placeholder='Пароль' value={password.password} onChange={e => setPassword({ password: e.target.value })}  />

            <MyButton type='submit' onClick={Login} >Отправить</MyButton>
            {isAuth==true
                ?<a>Вы уже авторизовались , вернитесь на главную страницу</a>
                :'none'
            }
        </form>
    )
}