React component don't get the whole data

I'm trying to show a page in React that shows a grid of images. I get the data for the grid with a fetch to a file in a public subfolder.

export const GalleryGrid = () => {


const { galleries, loading } = useFetchGalleries()

return (
    <div>
        {loading && <div className="diving__loading flex-column">

            <div><Loader
                type="Puff"
                color="#264653ff"
                height={200}
                width={200}
            /></div>
            <div>
                <p>
                    Please Wait ...
                </p>
            </div>

        </div>}

        <div className="card-grid">
            <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">

                {
                    galleries.map(gal => (
                        
                        <GalleryGridItem
                            key={gal.url}
                            {...gal}
                        />

                    ))
                }

            </div>
        </div>
    </div>
)
}

I use the function "useFetchGAlleries()" to get the data I neew for the grid. This function launch a helper, called "getGalleries", and return de data stored with useState

export const useFetchGalleries = () => {

const [ state, setState]  = useState({
    galleries: [],
    loading: true
});

useEffect(() => {

    getGalleries()
        .then( galleries => {

            setState({
                galleries,
                loading: false
            })

        })
        .catch( e => {
            console.log( e );
        });
  
}, [ ]);

return state;

}

The helper "getGalleries" uses a fetch to read the files that contain objects in json format, and transform them to an object:

export const getGalleries = async () => {

const galleries = await fetch(`./assets/data/galleries.txt`)
                    .then( res => {
                        return res.json();
                    })
                    .then( body => {
                        return body.galleries;
                    })
                    .catch( e => {
                        console.log( e );
                    });

// the .map check if the gallery have images or not
await galleries.map( gal => (

    gal.interactive ? fetch(`./assets/data/${gal.url}.txt`)
                        .then( res => {
                            return res.json();
                        })
                        .then( body => {
                            gal.images = body.images;
                        })
                        .catch( e => {
                            console.log( e );
                        })
                    : ""

));

return galleries ;       
        
}

In "GalleryGrid" I have all information about galleries I need. For example, the first gallery from the array is:

{
    "name": "Nuestros Fondos 2022",
    "url": "galeria_22_fishes",
    "number": 8,
    "interactive": true,
    "images": [
           {"index": '01', "url": 'galeria_03_cursos'},
           {"index": '02', "url": 'galeria_03_cursos'},
           {"index": '03', "url": 'galeria_03_cursos'},
           {"index": '04', "url": 'galeria_03_cursos'},
           {"index": '05', "url": 'galeria_03_cursos'},
           {"index": '06', "url": 'galeria_03_cursos'},
           {"index": '07', "url": 'galeria_03_cursos'},
    ]
}

But when I give the info to the component "GalleryGridItem" in the "GalleryGrid" function, the data doesn't contain the array of images. The data is as follow:

{
    "name": "Nuestros Fondos 2022",
    "url": "galeria_22_fishes",
    "number": 8,
    "interactive": true,
    "images": []
}

Any suggestion about what is happening?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/9oyPNCs