Unable to show images being fetched in React.useEffect(). Static images work though.

[37devv]

Checklist before opening an issue
Lots of issues are opened that are unrelated to this package, please take a moment to ensure the issue is not on your end 🙏.

• [X ] Did you try google?
• [X ] Did you search for previous Issues in this repo?

Describe the bug
Hi all, I'm trying to modify the existing example in the repo (https://github.com/xiaolin/react-image-gallery#example) What I try to do, is to fetch custom images and not have a static list in the component. The links to the images are in my backend. When I load my page with the dynamic list fetchedImages and pass this variable as props, I only get the play button and the fullscreen button displayed from the gallery but no images

Image Gallery Version
What version of react-image-gallery are you using? "react-image-gallery": "^1.3.0",

**My Code **\

import React from "react";
import ImageGallery from "react-image-gallery";
import "react-image-gallery/styles/css/image-gallery.css";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import OpeningTimes from "./OpeningTimes";
import axios from "axios";
import Typography from "@mui/material/Typography";
import { useParams } from "react-router-dom";

const baseURL = "http://localhost:8080/api";

const instance = axios.create({
  baseURL,
});

const staticImages = [
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: "https://picsum.photos/id/1015/1000/600/",
    thumbnail: "https://picsum.photos/id/1015/250/150/",
  },
  {
    original: "https://picsum.photos/id/1019/1000/600/",
    thumbnail: "https://picsum.photos/id/1019/250/150/",
  },
  {
    original:
      "https://www.coiffure-armida.ch/wp-content/uploads/2020/05/Coiffeur_Muri_Salon_.jpg",
    thumbnail:
      "https://www.coiffure-armida.ch/wp-content/uploads/2020/05/Coiffeur_Muri_Salon_.jpg",
  },
];

export default function HairdresserProfile() {
  const [data, setData] = React.useState({});
  const { id } = useParams();

  const fetchedImages = [];

  React.useEffect(() => {
    async function fetchData() {
      try {
        const response = await instance.get("/hairsalons/" + id);
        const responseData = response.data;

        setData(responseData);

        const imageObject = responseData.images.map((x) => ({
          original: x.link,
          thumbnail: x.link,
        }));

        fetchedImages.push(imageObject);

        console.log("Images: " + JSON.stringify(fetchedImages));
        console.log("Images: " + JSON.stringify(images));
      } catch (error) {
        console.error(error);
      }
    }

    fetchData();
  }, []);

  return (
    <Container maxWidth="lg">
      <ImageGallery items={fetchedImages } />
    </Container>
  );
}

Expected behavior
Fetched images in the fetchedImages variable should be displayed

Screenshots
Dynamic images

Static images

Additional context\

These are my two different objects. They're the same from the properties but their value is different. I guess it's ok that way.

Imagesfetched: 
[
  {
    "original": "https://www.coiffure-armida.ch/wp-content/uploads/2020/05/Coiffeur_Muri_Salon_.jpg",
    "thumbnail": "https://www.coiffure-armida.ch/wp-content/uploads/2020/05/Coiffeur_Muri_Salon_.jpg"
  },
  {
    "original": "https://lh3.googleusercontent.com/p/AF1QipODfoH--4h9B3ZOgm6IoeH12_5ocBSy7Hs-4tOv=s680-w680-h510",
    "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipODfoH--4h9B3ZOgm6IoeH12_5ocBSy7Hs-4tOv=s680-w680-h510"
  },
  {
    "original": "https://lh3.googleusercontent.com/p/AF1QipO-PbtD9Dsm9OwftUfuyT9cNoL8sdAhJWr1w_u2=s680-w680-h510",
    "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipO-PbtD9Dsm9OwftUfuyT9cNoL8sdAhJWr1w_u2=s680-w680-h510"
  }
]



Imagesstatic:
[
  {
    "original": "https://picsum.photos/id/1018/1000/600/",
    "thumbnail": "https://picsum.photos/id/1018/250/150/"
  },
  {
    "original": "https://picsum.photos/id/1015/1000/600/",
    "thumbnail": "https://picsum.photos/id/1015/250/150/"
  },
  {
    "original": "https://picsum.photos/id/1019/1000/600/",
    "thumbnail": "https://picsum.photos/id/1019/250/150/"
  },
  {
    "original": "https://www.coiffure-armida.ch/wp-content/uploads/2020/05/Coiffeur_Muri_Salon_.jpg",
    "thumbnail": "https://www.coiffure-armida.ch/wp-content/uploads/2020/05/Coiffeur_Muri_Salon_.jpg"
  }
]

[depsir]

You are passing to the ImageGallery a "non reactive" list, aka a normal variable. When you modify the content of the fetchedImages array, React knows nothing about that change and no additional render is performed.

One way to update the gallery with fetched images, is to make fetchedImages a state:

  const [fetchedImages, setFetchedImages] = React.useState([]); // declare fetchedImages as state instead of plane array
  
  React.useEffect(() => {
    async function fetchData() {
      // ... fetch and process images
      setFetchedImages(imageObject)  // instead of fetchedImages.push(imageObject);
    }
    fetchData();
  }, []);