Why Carusel does not accept Next.js Image?

We use react-responsive-carousel in our Next.js project. When we replaced img with Image to optimize thumbnail image size, thumbnails disappeared. Do you know why?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[UsamaIrfan]

I have fixed the issue using the renderThumbs property. I am using a combination of tailwindCSS and Next.js. My solution is as follows.

  <Carousel
    axis="vertical"
    infiniteLoop={true}
    autoPlay={true}
    swipeable={true}
    renderThumbs={() =>
      product.images.map((img, idx) => (
        <div key={idx} className="w-full h-20 relative">
          <Image
            src={img}
            layout="fill"
            objectFit="contain"
            alt="logo"
          ></Image>
        </div>
      ))
    }
  >
    {product.images.length !== 0 &&
      product.images.map((img, idx) => (
        <Image
          key={idx}
          src={img}
          alt={`${product.title} preview ${idx}`}
          layout="responsive"
          width={650}
          height={650}
          priority={idx === 0}
        ></Image>
      ))}
  </Carousel>

My product.images is just an array containing links in the following format.

["examplelink.com", "examplelink.com"]

This worked perfectly fine for me.