React multi carousel неправильно отображает предметы

Question

Я начал использовать Next js, и я не знаю, является ли это проблемой по отношению к нему или самому React.

Так что проблема в том, что «response-multi-carousel» не работает в мое приложение. Таким образом, в основном это работает, если я жестко закодировал значения там, но когда я использую свои пользовательские компоненты, где есть функция map, он не отображает это должным образом. Требуется 3 компонента, как они есть в одном. Вы можете проверить это на изображении, которое я разместил ниже. Я пытался отобразить Compilations компонент вне SliderCarousel компонента, и он работал как надо, но когда я передаю Compilations как дочерний элемент SliderCarousel, он не перехватывает его и не дает ему свои собственные классы из react-multi-carousel библиотека

Вот мой код ниже, и я пропустил некоторые операции импорта и экспорта, чтобы сосредоточить внимание на основных компонентах

Мой Compilation компонент выглядит следующим образом:

const compilation = ({ className, text, img }) => {
    return (
        <div className={`${className} ${classes.Compilation}`}>
            <img src={img} alt={text} />
            <div>
                <h3>{text}</h3>
            </div>
        </div>
    );
};

Мой Compilations компонент выглядит следующим образом:

const compilations = ({ items, onClick }) => {
    const compilationsView = items.map(item => {
        return <Compilation key={item.id} onClick={() => onClick(item.id)} text={item.text} img={item.img} />;
    });
    return <React.Fragment>{compilationsView}</React.Fragment>;
};

SliderCarousel компонент выглядит следующим образом

<Carousel
                swipeable={true}
                draggable={true}
                showDots={true}
                responsive={responsive}
                ssr={true} // means to render carousel on server-side.
                infinite={true}
                autoPlay={true}
                autoPlaySpeed={1000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={[ "tablet", "mobile" ]}
                // deviceType={this.props.deviceType}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
            >
                {items}
            </Carousel>{" "}

Вот мой pages/index.js файл

<SliderCarousel items={<Compilations items={getBookCarouselItems()} />} />

И функция:

    {
        id: 0,
        img: "/static/images/main/books/slider-carousel/1.png",
        text: "ТОП-10 романов"
    },
    {
        id: 1,
        img: "/static/images/main/books/slider-carousel/2.png",
        text: "На досуге"
    },
    {
        id: 2,
        img: "/static/images/main/books/slider-carousel/3.png",
        text: "Бестселлеры"
    }
];

Я надеюсь, что вы можете помочь мне решить эту проблему, потому что я не знаю, как решить эту проблему