react-responsive-carousel | React.js Responsive Carousel | Animation library

I am using the react-responsive-carousel library. Here, I want to change the default indicators CSS, dots shape to line shape. My code is,

I've been having this problem for a while and I see that other people have it too, but even though I have the same code as them it is still not working and I don't know what I'm doing wrong. I'm working with react, webpack, babel and scss for a project. At first I create a main component which has a background image tha loaded without problems, but when I added a carousel component I had an error that said that I needed a loader for the images to appear (html images, not bakground). So I looked it up on the internet and two loaders appeared: url-loader and file-loader, I installed both and added one in my webpack config file as it was said in the documentation. The images loaded, but the background image of the main component didn't, and not only that, all the styles for the background didn't apply either.

This is my webpack config file, I tried putting both loaders, then only one, then the other, but none of them worked. I tried every solution tha came across stackoverflow but the code isn't working and there is no errors in my terminal.

///////EDIT

I added absolute paht but it's still not working. The image gets fetched because I'd get an error if it isn't so I don't think this is a path issue. I updated the webpack config file

i had created card component and i called in my ProductPage.js after that i am getting error like Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Card.c3b0a67ff849f2bda062.JS') is not a valid name. initially it was div and i change to card after that i am getting above error if changed div then it is working fine how can i solve this issue. For ref Please find the attached image.

and code is like this.

ProductPage.js

I want to test the rendering of the images of my functional component, the products are in a json, I tried to import the json and pass it in the component but it didn't work :

I am using React Carousel from The dependency react-responsive-carousel to display the image the user has uploaded on firebase I query the images in an Array Like:

I'm getting this error after I've updated the packages in my package JSON file.

The Aim: Use the value of i.id from the mapped components when clicked on to search state ids and locate the object which contains the same id value... When this object is found to return/update id and active values.

Clicking on the dynamic rendered component triggering onClick to change value of the current active: true to active: false and find object with id of the clicked component and this.setState({active:value}) in that object. Then if (active === true) render iframe containing the object's id value.

The state

I am trying to find an object key value in a state array, and when that value is found (true) return the value of another key value in that object. I am really bad with loops :/ I've attempted may variations of loops and this is only my latest attempt.

the state

I have a like button, which once clicked increases the default value setLikedNumbers(likedNumbers + 1); by one. When the button is pressed again, it is decreased by one using setLikedNumbers(likedNumbers - 1); This works fine until the button is pressed multiple times per second, which creates some weird values. React strict mode tags are removed.

Video of the problem: https://vimeo.com/593482477 In the beginning I click the button slowly, then I proceed to do it multiple times per second and then axios catches up with the requsts.

Even if the button is incremented multiple times before axios returns an error code and return the current value - 1, shouldn't that mean that the original value is retained as the number of increases is equal to the number of decreases?

The code from where I suspect the issue is(I stripped some unneeded lines):

The component