react-elastic-carousel | A flexible and responsive carousel component for react | Carousel library

I am using react-elastic-carousel and reactjs-media npm packages to display a carousel of youtube videos . However my videos do not show up and if I click on one I get "Error appeared . Try again later "

enter image description here

My code :

VideoSlider.js

I am using the .map() function in the exact same way as in other projects, but on the one I am currently working on, it's throwing me this error: Error: Objects are not valid as a React child (found: object with keys {id, title}). If you meant to render a collection of children, use an array instead. This is my code (the structure of which has worked in other projects as I mentioned):

here is the code and I want to add images from my local folders instead of item#1,2,3,... how can I do that? besides if anyone of you knows a good source code for creating product slider please let me know thank you.

I'm trying to load images into React Carousel. When I .map through the array of filepaths for my images, I load all the images into one 'slide', but I need them to load into different slides.

Seen (all four pictures in one slide):

Wanted (note the 4 dots at bottom, indicating 4 slides. This example is just hard-coded):

Here's the relevant code. Item.js is the parent and CarouselImages.js is the imported function to parse. There's a lot more to these components but I pared them down to the necessary parts.

Item.js

i am new to react js and will appreciate some advise. Trying to call different images for each CarouselItem

is it possible to call an image in a react jsx html element tag?

i tried the below but no success: