react-id-swiper | use idangerous Swiper as a ReactJs component | Frontend Framework library

I am using React-id-swiper to load images for products. Let's say I have 5 products.

I am trying to use a function to detect when every image is successfully loaded, then when they are, set the useState 'loading' to false, which will then display the images.

I am using a variable 'counter' to count how many images there are to load. Once 'counter' is more than or equal to the amount in the list (5), set 'loading' to FALSE and load the images.

However, I am noticing that when I console log 'counter' when running it from useEffect, it ends at '0' and renders 5 times. 'Loading' also remains true.

However, if I trigger a re-render, I see 1,2,3,4,5 in the console. 'Loading' then turns to false.

I suspect this is to do with useEffect being too fast, but I can't seem to figure it out. Can somebody help?

Code:

Now I'm working for my react project. Also I'm a newbie to react-id-swiper. So I needed to make a carousel for my web site.(Like this:- https://codesandbox.io/s/reie4?file=/index.html:0-2857, https://react-id-swiper.ashernguyen.site/example/three-d-coverflow-effect) So I used react-id-swiper npm package for that. But when I implement it I got a slider like this.

So my code is,

I'm trying to integrate the 3d cover flow for the project, but the coverflow not working as expected, I included image and code. Thanks in Advance for the help!

I have tried using the lastest package, i found that is not working, so i tried these old version, that also not working, the version which i used is "react-id-swiper": "2.3.2", "swiper": "^6.1.2".

code :

I run project "react-app-rewired start" development mode. The project compiles without errors.

Next I edit any file in /src/* the project is recompiled, but does not respond to /src/view/* NO compilation!

Although if I kill and restart the demon "react-app-rewired start" the project will compile completely. Why is this happening?

package.json