Using React and react-slick, I am just having a general hard time understanding how to use it

I am try to use "react-slick": "^0.24.0" to create a carousel. If you know a better library I'd like to know that too.

I've looked through the documentation. I've essentially just copied and pasted their example and placed my own JSX where they would have put their slides. But I am not able to use it correctly. I am thinking it must need to be structured with css, which I have experimented with but couldn't figure out. I'm not sure which element is controlling the interaction. It looks like the slider is forcing all my images, into a single slide. Please help me out.

The first component should render the slider. This is almost copied one to one from this example. Although I am using {carousel} instead of the multiple <div><h3></h3></div

Here you can see the two main components.

import React from 'react';
import CarouselItem from '../CarouselItem/CarouselItem';
import './Carousel.css';
import Slider from "react-slick";

export class Carousel extends React.Component {

    render(){

    let settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            initialSlide: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    };

        const carousel = this.props.movies.map((item, index) => {
            return (
                <CarouselItem data={item} index={index} key={this.props.movies[index].id} />
            );
        });

        return (
            <div className="inner-carousel">
                <Slider {...settings}>
                    {carousel}
                </Slider>
            </div>
        )
    }
}

import React from 'react';
import './CarouselItem.css';

export default function CarouselItem(props){
    return (
        <div className="movieContainer">
            <img className="moviePoster" src={`https://image.tmdb.org/t/p/w500/${props.data.poster_path}`} alt={props.data.title} />
        </div>
    );
}

Here's what it looks like now Edit: the first 4 picture are not related to the carousel.

I think you're missing the CSS. Your link doesn't have any react-slick related CSS loaded. The docs suggest

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

Depending on your setup, you might have to change the way you import the CSS.