Реагировать, если статусы всегда приводят к ложному условию после повторного рендеринга состояния

У меня есть этот компонент в реакции, который вернет заголовок «Загрузка», заголовок «Вошел в систему» ​​или заголовок «Не вошел в систему», в зависимости от состояния.

Я сделал состояние так, чтобы оно обновлялось и менялось с «Загрузка» на «Вошел в систему» ​​или «Не вошел в систему», как только обещание isLoggedIn возвращает значение либо true, либо false.

Тем не менее, мой второй статус If всегда условно оказывается ложным и, следовательно, всегда возвращает «Не вошел в систему» ​​в качестве заголовка, даже если обещание возвращает true (говоря, что пользователь вошел в систему).

Вот код:

function UserProfileNavItem(props) {
  const [profiledLoaded, sethasLoaded] = useState(false);
  var isLoggedInLocal = false;
  isLoggedIn().then((res) => {
    if (res) {
      console.info("We are logged in");
      isLoggedInLocal = true;
    }else{
      console.info("We are not logged in");
    }
    sethasLoaded(true);
  });
  if (!profiledLoaded) {
    return (
      <h1>Loading</h1>
    );
  }
  if (!isLoggedInLocal) {
    return (
      <h1>Not Logged In</h1> // THIS IS ALWAYS SENT BACK EVEN IF isLoggedInLocal IS TRUE
);
  } else {
    return (
      <h1>Logged In</h1>  // THIS IS NEVER SENT BACK
    );
  }
}

Не думайте, что мне нужно показывать свое isLoggedIn обещание, но спросите, если нужно.

(Да, я новичок, чтобы реагировать)