useContext и данные локального хранилища возвращаются как ноль

Question

, так что я учусь Reactjs, и я делал страницу регистрации и входа в систему, поэтому у меня есть обработчик реакции, называемый const [fullName, setFullName] = useState(''), где fullName установлен при регистрации, но я хотел сохранить fullName и использовать его при входе в систему. тоже, так что после того, как я погуглил, я наткнулся на создание контекста, но когда я попытался использовать его с локальным хранилищем для установки и получения полного имени, он все равно не отображается при входе в систему

Создать контекст

import { createContext } from 'react';

const fullNameContext = createContext({
  fullName: '',
  setFullName: () => {},
});

export default fullNameContext;

Это приложение. js

function App() {
    const [fullName, setFullName] = useState(!!localStorage.getItem('fullName'));


  const classes = useStyles();
  return (
    <FullNameContext.Provider value={{ fullName, setFullName }}>
      <Header />

      <Container component="main" className={classes.content}>
        <Switch>
          <R exact path="/" component={LoginPage} />
        </Switch>
      </Container>
    </FullNameContext.Provider>
  );
}

const R = props => (
  <FullNameContext.Consumer>
    {({ fullName }) =>
      fullName !== null ? <Route {...props} /> : <Account {...props} />
    }
  </FullNameContext.Consumer>
);

Страница входа

  const { fullName, setFullName } = useContext(FullNameContext);
 useEffect(() => {
    let name = localStorage.getItem('fullName');
    if (name) {
      setFullName(name);
    }
  }, [isLoggedIn]);
const login = async () => {
    try {
      let resp = await api.account.login(username, password);
      localStorage.setItem('fullName', fullName);
      setIsLoggedIn(true);
    } catch {
      console.log('login failed');
      setPassword('');
    }
  };

// typography to show the name
// form to ge the name

<Typography variant="h6">
            {isLoggedIn
              ? `Logged in as ${fullName}`
              : isRegister
              ? 'Register'
              : 'Login'}
          </Typography>
          <br />
          {!isLoggedIn && isRegister && (
            <TextField
              label="Full Name"
              inputProps={{ maxLength: 32 }}
              value={fullName}
              onChange={e => {
                let val = e.target.value;
                setFullName(val);
              }}
            />