react-multi-carousel compatibility issue with Next.js 14 and React 18

[waseemViwell]

Description:
I'm experiencing an issue with the react-multi-carousel component when using Next.js 14 with React 18. Here is the component setup:

`"use client";
import React from "react";
import Carousel, { ResponsiveType } from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import Image from "next/image";

export interface ImagesSliderProps {
eventImages?: string[];
testId?: string;
}

const responsive: ResponsiveType = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
slidesToSlide: 1,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
slidesToSlide: 1,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
slidesToSlide: 1,
},
};

export function ImagesSlider({ testId, eventImages }: ImagesSliderProps) {
return (
<div className={styles.container} data-testid={testId ?? "event-images-slider"}>

{eventImages?.map((slide, index) => (
<React.Fragment key={index}>

</React.Fragment>
))}


);
}

const styles = {
wrapper: "w-full h-auto",
image: "w-full h-240 object-cover rounded-12",
container: "mb-10 relative",
dotItem: "first:ps-0 last:pe-0 px-2",
};
`

Issue Details:

Using react-multi-carousel with this configuration in a Next.js 14 application (React 18) produces unexpected behavior.
The carousel either does not render any runtime errors.
Expected Behavior: The carousel should display correctly across different screen sizes as defined in the responsive configuration.
it goes outside the content area width and keeps on scrolling

Additional Information:

Next.js version: 14
React version: 18
react-multi-carousel version: [version you’re using]
Possible Workaround/Debug Attempts: If there are any temporary workarounds, or if specific settings or configurations resolve this issue, sharing that information would be greatly appreciated.

Screenshots

[ajaybhatia]

Facing same issue. On mobile screens main container goes out of screen and break the whole screen's responsiveness.