Лучшая практика асинхронного получения данных API из разных конечных точек с помощью React?

Я изучаю React для проекта на работе, и в настоящее время у меня действительно возникают проблемы с освоением асинхронной модели.

Вот компонент, над которым я работаю:

const Customers = () => {
    const [logos, setLogos] = useState([]);
    const [customers, setCustomers] = useState([]);
    const [titlePrompt, setTitlePrompt] = useState([]);
    const navigate = useNavigate();

    useEffect(() => {
        // create a customer client object 
        const client = new Client();

        // query for the customer list and save name and token
        if (customers.length === 0) {
            client.get_customers().then((res) => {
                const customer_info = res.map(customer => {
                    return {
                        'name': customer.customer_name,
                        'token': customer.mqtt_customer_token
                    }
                });
                setCustomers(customer_info);
            });
        }

        if (customers.length > 0) {
            const fetched_logos = [];
            for (let i = 0; i < customers.length; i++) {
                client.get_site_by_type(customers[i].token, 1).then((res) => {
                    const new_logo = {
                        [customers[i].name]: res.logo 
                    };
                    fetched_logos.push(new_logo);
                });
            }
            setLogos(fetched_logos);
        }

        setTitlePrompt("Select A Customer Shown Below");
    }, [customers, logos]);

    /**
     * button handler to transition to a dataframe view of the chosen customer via token
     * @param {defining} token 
     */
    const onButtonClick = (token) => {
        navigate('/dataframe', { state: { token } });
    };

    return (
        <div className = {'mainContainer'}>
            <div className = {'contentContainer'}>
                <div className = {'titleContainer'}>
                    <div>{titlePrompt}</div>
                </div>
                <br/>
                <ImageList cols = {4}>
                    {customers.map(customer => (
                        <ImageListItem key = {customer.name}>
                            <img alt = {customer.name} src = {`data:image/png;base64,${logos[customer.name]}`}></img>
                        </ImageListItem>
                    ))}
                </ImageList>
            </div>
        </div>
    );
};

export default Customers;

Я пытаюсь получить информацию о клиенте, такую ​​как имя и логотип, и отобразить ее в ImageList.

Проблема в том, что сначала мне нужно получить имя и токен (используемый для последующих вызовов API) для каждого клиента из одной базы данных, затем мне нужно получить логотипы один за другим, поскольку все они находятся в конкретных базах данных клиентов. Я хочу визуализировать компонент только с помощью замещающего текста компонента img, а затем заполнять изображения по мере их поступления. Я просто не могу понять, как правильно синхронизировать это внутри useEffect. Я также не знаю, правильно ли использовать операторы if для управления тем, что выполняется во время последующих вызовов useEffect, или это просто хакерство.

Я попробовал связать .then, но вызовы setState являются асинхронными, поэтому это приводит к состояниям гонки и не работает.

Спасибо за чтение.

Обновлено:

Вот фрагмент кода, показывающий мою попытку с цепочкой .then:

client.get_customers().then((res) => {
            const customer_info = res.map(customer => {
                return {
                    'name': customer.customer_name,
                    'token': customer.mqtt_customer_token
                }
            });
            setCustomers(customer_info);
        }).then(() => {
            for (let i = 0; i < customers.length; i++) {
                client.get_site_by_type(customers[i].token, 1).then((res) => {
                    const new_logo = {
                        [customers[i].name]: res[0].logo
                    }
                    setLogos([...logos, new_logo]);
                });
            }
        });