Images not showing even if fetched correctly

[Nickolausen]

Hi there, I'm writing because I'm having trouble showing a gallery of images in my React application.
The piece of code that should do the work is the following:

RassegnaDettaglio.jsx

import { RowsPhotoAlbum } from 'react-photo-album';
import "react-photo-album/rows.css";
/* Other React imports as well */

function RassegnaDettaglio() {     
    const [ rassegna, setRassegna ] = useState({})
    const { event_url } = useParams()

    const [ photos, setPhotos ] = useState([])
    
    useEffect(() => 
        {
            let fetchedRassegna = get_DB_Eventi().find((el) => el.event_url === event_url)
            setRassegna(fetchedRassegna)
            
            const requestURL = `https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=${config.API_KEY}&photoset_id=${fetchedRassegna.flickr_album_id}&user_id=${config.USER_ID}&format=json&nojsoncallback=1`
            let fetchedPhotos = [];

            fetch(requestURL)
                .then((res) => res.json())
                .then(data => 
                    {
                        for (const pic of data.photoset.photo) 
                        {
                            let imgElem = new Image()
                            imgElem.src = `https://live.staticflickr.com/${pic.server}/${pic.id}_${pic.secret}_b.jpg`
                            imgElem.className = "img-fluid"
                            
                            fetchedPhotos.push(imgElem)
                        }
                        
                        let rawPhotos = []
                        fetchedPhotos.forEach(photo => 
                            {
                                rawPhotos.push(
                                    {
                                        src: photo.src,
                                        width: photo.width,
                                        height: photo.height,
                                    })
                            })
            
                        setPhotos(rawPhotos)
                    })

        }, [])
        return <>
                /* JSX for the rest of the page */
                    <h2 className='pt-5 fs-1 pb-3'>Galleria</h2>
                    <div className="px-5">
                        <RowsPhotoAlbum photos={photos} targetRowHeight={350}></RowsPhotoAlbum>
                    </div>
                </div>
                /* JSX for the rest of the page */
            </>
}

As you can see, I'm fetching a gallery from Flickr and I'm sure to get the response I expect. However, 2 things happen:

1. When I run the application locally, once every 3 times the gallery renders with all the pictures fetched.
2. When the application runs on GitHub Pages, the fetch works perfectly but the component can't render the photos. No errors in the console, nothing shows.

https://nickolausen.github.io/compagnia-dei-pitagorici/ - this is the website, go to the bottom of the home page and click 'Scopri di più' in one of the two cards that appear under the title 'Ultime rassegne'.

What am I missing? Thanks for the help and the patience.

[igordanchenko]

The library doesn't render any photos in your case because all of your photos have zero dimensions.

[Nickolausen]

Oh thank you for the quick response! I'm new to React and JS Frameworks in general, so I'm on my way to learn all the features required to develop an app. I love your gallery, it suits my needs perfectly! I've fixed the issue.