Перед рендерингом представления убедитесь, что Promise решен

Вы можете использовать React Hooks для достижения желаемого, а точнее useState и useEffect.

useState помогает вам сохранять состояние, от которого зависят ваши компоненты пользовательского интерфейса — как только состояние будет обновлено, эти компоненты также будут обновлены.

useEffect можно использовать для выполнения кода, который должен обновляться при обновлении какой-либо внешней зависимости (второй параметр функции, в этом примере пустой массив). Используя пустой массив, мы заявляем, что это должно выполняться только один раз (поскольку нет никаких зависимостей, которые могли бы привести к повторному запуску).

import { useEffect, useState } from "react";

// Emulates retrieving the user from Cognito
async function mockedFetchAuthSession(): Promise<{ groups: string[] }> {
  // adjust, save, and reload the page to see diff results
  const groups = ["GroupOne"]; // <-- replace with another group do see diff results
  return new Promise((resolve) => {
    setTimeout(() => resolve({ groups }), 2_000);
  });
}

function groupOne(group: string): boolean {
  return group === "GroupOne";
}

export default function TheIndex() {
  const [isGroupOne, setIsGroupOne] = useState<boolean | null>(null);

  async function currentSession() {
    try {
      const { groups } = await mockedFetchAuthSession();
      console.info("these groups: ", groups);
      setIsGroupOne(groups.some(groupOne));
    } catch (err) {
      console.info(err);
    }
  }

  useEffect(() => {
    currentSession();
  }, []);

  return (
    <div>
      {isGroupOne === null ? (
        <p>Loading...</p>
      ) : isGroupOne ? (
        <p>Welcome back!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

Запускающий код: https://codesandbox.io/s/xenodochial-fermi-4mth3h?file=/src/TheIndex.tsx

Это классическая проблема фронтенда: рендеринг данных, которые асинхронно извлекаются из бэкенда.

Здесь нет никакой магии, единственное решение — условно отрисовать загрузочный пользовательский интерфейс во время ожидания данных Backend, а затем, как только они будут получены, вы сможете действовать, как изначально планировалось. Некоторые фреймворки или библиотеки Frontend могут предоставлять помощники для автоматического управления этим поведением, но они всегда реализуют одну и ту же схему «под капотом».

Например, в вашем случае, используя крючок useAsync из реакции-использования:

npm install react-use

import React, { useMemo } from "react";
import { useAsync } from "react-use";

function Index() {
  const groupsAsync = useAsync(currentSession, []); // Fill the dependency array if session should be refreshed on some criteria

  const isGroupOne = useMemo(() =>
    !groupsAsync.loading && 
    groupsAsync.value?.some(
      (group) => group === "GroupOne"
    ), [groupsAsync.loading, groupsAsync.value]);

  return (
    <div>
      {groupsAsync.loading
        ? "Loading..." // Any UI you want as loader, e.g. skeleton, or nothing at all...
        : isGroupOne
        ? <p>Welcome back!</p>
        : <p>Please log in.</p>}
    </div>
  );
}