react-image-gallery | React carousel image gallery component with thumbnail | Carousel library

I'm working on a React project and I'm trying to use this library(https://www.npmjs.com/package/react-image-gallery)

from npm And from the Documentation, they say we must add these instructions to import the CSS

my component

When trying to push my app to Heroku I am getting the following errors (edited for brevity):

When I deploy React project to Netlify, I'm getting this error: enter image description here

(node:1551) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /opt/build/repo/node_modules/postcss-safe-parser/node_modules/postcss/package.json. Update this package.json to use a subpath pattern like "./*". (Use node --trace-deprecation ... to show where the warning was created) Creating an optimized production build... Failed to compile.

./src/assets/css/responsive.css ParserError: Syntax Error at line: 1, column 23 at Array.forEach () at Array.forEach () error Command failed with exit code 1.

responive.css

I am trying to setup a React JSFiddle to include react-image-gallery.

Using UNPKG i've successfully linked to the package:

https://unpkg.com/browse/react-image-gallery@1.0.8/

I'm still stuck on the following:

1. I think i should be referencing a .js file in the package but it isn't clear which one?
2. In the fiddle, should i use the resources option, or, should i include a tag?

HTML is:

I'm working react.js image gallery project with this as starter. There is a Settings field to customize the gallery performance. I am showing this setting on the right side of the screen when in Full screen mode as like as below image.

.

By the way, the 2 input elements don't work as if they were disabled. (mouse clicking, typing any keyboards), I can't do anything with these inputs.

I know that Using the Fullscreen API in web browsers, for security reasons, most keyboard inputs have been blocked in the Full screen mode. To fix this problem I tried use Element.ALLOW_KEYBOARD_INPUT in my code.

I'm trying to create a slide show component in ReactJS taking a cue from ImageGallery]1

But when I debug my code I got this error:

ShowSlideSpring.js:

I have an issue where my useEffect is causing the following warning:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

The issue only shows up when reloading the page starting from the page where this component is active..

The component works all well, but the warning looks quite bad.

I'v seen multiple posts where using a clean-up function should work, and tried to apply, but it keeps giving me the same warning.

Any clues?

I'm trying to figure out how to map gallery images into a lightbox component in Gatsby using graphql query. I think I need to set images = to the childimage sharp array but I'm not sure how to structure it, keep getting undefined errors. Any pointers would be massively appreciated. Let me know if any more info is required.

I am using react-image-gallery to have a slideshow on my webpage. I am fetching the data from a json file that looks like this.