Как визуализировать JSX, возвращаемый асинхронной функцией, вызванной изнутри Array.Map() в React?

В моем приложении React я вызываю асинхронную функцию, которая отображает JSX изнутри array.map(), но ничего не отображается. Я подтвердил, что функция вызывается правильно.

Я подозреваю, что что-то связано с выполнением рендеринга до того, как асинхронная функция вернет свой результат, но я не понимаю, почему это произойдет, если асинхронная функция использует ожидание в своих внутренних вызовах.

<div>
   {
      gallery.map((image) => 
         {renderImage(image, 'vegan-mundi-gallery')}
   )}
</div>

Я попытался обернуть функцию, которая генерирует JSX, внутри фрагмента React (<></>), как показано в приведенном ниже фрагменте, но затем я получаю сообщение об ошибке «Объекты недействительны в качестве дочернего элемента React (найдено: [object Promise])». .

{
   gallery.map((image) => (
   // The react fragment below is generating the error Objects are not valid as a React child    (found: [object Promise]) - which reinforced the idea that the async function haven’t returned its result by the time of the rendering
      <>
         {renderImage(image, 'vegan-mundi-gallery')}
      </>
   )
)}

Кто-нибудь может помочь с этим?

Это мой полный код:

import { useEffect, useState } from "react";

export default function Gallery (){

    const [isLoading, setIsLoading] = useState(true);
    const [gallery, setGallery] = useState([]);

    useEffect( ()=> {
    // some code that gets the gallery array from an API call and handles the isLoading state 
    } , []);

    const renderImage = async(item, bucket) => {

        const photo = item.PHOTO;
        const data = await fetch(`http://1.1.1.1:4000/s3/${bucket}/${photo}`);
        const preSignedUrl = await data.json();
        console.info(preSignedUrl) // I can see the preSignedUrl in the console, so the async call worked!

        return (
            <figure>
                <div>
                    <img key = {photo}
                        src = {`${preSignedUrl}`}
                    />
                </div>
                <figcaption>{item.LABEL}</figcaption>
            </figure>
        )
    }


    if (isLoading){
        return(<p>loading...</p>);
    }
    else {

        return (
                <div>
                    {
                        gallery.map((image) => 
                                {renderImage(image, 'vegan-mundi-gallery')}

                    )}
                </div>
          )
    }
}

Я проверил