My component uses react-multi-carousel. I would only show two stock photo. I adjusted next.config.js also.

import Image from "next/image";
import Carousel from "react-multi-carousel";

function ProductList(props: ProductListProps) {
  const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 5,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 3,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 2,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
    },
  };

  let imageUrls = [
    "https://media.istockphoto.com/vectors/red-apple-illustration-icon-vector-vector-id1045495508",
    "https://media.istockphoto.com/photos/red-apple-picture-id184276818",
  ];

  return (
    <div>
      <Carousel
        responsive={responsive}
        ssr
        infinite
        itemClass="image-item"
        draggable={false}
        deviceType="desktop"
      >
        {imageUrls &&
          imageUrls.map((url: string, index: number) => (
            <Image
              src={url}
              className={`${styles.image} ${styles.carouselImage}`}
              layout="responsive"
              width={865}
              height={513}
              key={url}
              priority={true}
            />
          ))}
      </Carousel>
    </div>
  );
}

export default ProductList;

next.config.js:

module.exports = {
  images: {
    domains: [
      "ticket-t01.s3.eu-central-1.amazonaws.com",
      "media.istockphoto.com",
    ],
    deviceSizes: [320, 375, 450, 540, 640, 750, 828, 1080, 1200, 1920],
  },
  reactStrictMode: true,
  poweredByHeader: false,
};