react-simple-image-slider ne fonctionne pas sur le premier rendu

J'ai utilisé react-simple-image-slider pour créer un curseur d'image pour mon projet. Je récupère les images de firestore et les passe dans les propriétés du curseur. Cependant, ils ne s'affichent pas la première fois, mais seulement si je restitue (pas actualise). Lorsque j'ai essayé avec des images codées en dur, cela a fonctionné. De plus, est-ce que quelqu'un sait comment faire pour que l'image d'arrière-plan s'intègre dans le curseur? Merci

Voici le code :

export const ProductPage = () => {
 const {uniqueProductName} = useParams();
 const [productImages, setProductImages] = React.useState([]);
 
 const fetchProduct=async()=>{
 const q = query(collection(db, "products"), where("uniqueName", "==", uniqueProductName));
 const querySnapshot=await getDocs(q);
 let data = null;
 querySnapshot.forEach((doc)=>{
 doc.data().img.forEach((image)=>{
 productImages.push({'url': image})
 })
 
 })
 setProductImages(productImages);
 console.log(productImages);
 
}
 React.useEffect(() => {
 console.log(uniqueProductName);
 fetchProduct();
 });
 return (
 <div>
 <Navbarr/>
<MainContainer>
 <SliderContainer>
 <SimpleImageSlider
 width={896}
 height={504}
 images={productImages}
 showBullets={true}
 showNavs={true}
 />
</SliderContainer>
<InfoContainer>
</InfoContainer>
</MainContainer>
 <Footer/>
 </div>
 )
}

Pour adapter l'arrière-plan de l'image au curseur, la documentation indique ceci, mais je ne comprends pas où l'ajouter dans mon application React :
entrez la description de l'image ici

Solution du problème

Vous avez besoin de deux correctifs principaux :

const {uniqueProductName} = useParams();
const [productImages, setProductImages] = React.useState([]);
 
const fetchProduct = async () => {
 const q = query(collection(db, "products"), where("uniqueName", "==", uniqueProductName));
 const querySnapshot=await getDocs(q);
 let data = null;
 // You need to use a new array to trigger a re-render since arrays are objects 
 // with a reference memory address, and when React compares them it makes a shallow 
 // compare, it just checks if they are the same object ( same reference ), 
 // not they have the same properties or elements.
 const imgs = []
 querySnapshot.forEach((doc)=>{
 doc.data().img.forEach((image)=>{
 imgs.push({'url': image})
 })
 
 })
 setProductImages(imgs); 
}
 React.useEffect(() => {
 console.log(uniqueProductName);
 fetchProduct();
 },[]); // Add an empty array of deps, to make the fetch only on component mount, 
 // otherwise it will get stuck in a loop at each re-render.