React: I don't see thumbnails when using react-responsive-carousel

Question

I have followed the demo code and all works well except thumbnails. I set it to true so I can see 'ul' for the thumbnails in html, but it does not have any image src.

Here is the code below.

import React from 'react';

import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

import Image from 'next/image';

const Banner = ({ carousel, isDifferent, className }) => {
  return (
    <div>
      <Carousel autoPlay infiniteLoop showThumbs>
        {carousel.length !== 0 &&
          carousel?.map((item, idx) => (
            <div className={`relative w-full ${className} cursor-pointer`} key={idx}>
              <Image src={isDifferent ? item?.node?.mediaItemUrl : item.node.bannerInfo.bannerImage.mediaItemUrl} alt="banner" objectPosition="center top" layout="fill" objectFit="cover" priority />
            </div>
          ))}
      </Carousel>
    </div>
  );
};

export default Banner;

This is how I use Banner component

      <Banner carousel={product.galleryImages.edges} isDifferent className="md:hidden h-[400px]" />

When I check on the development tool, I see the ul.

Please let know what I am missing.

Answer 1

If not using the img html element directly you need to render the thumbnails with renderThumbs

example:

  renderThumbs={() =>
                    mThumbnails.map((thumbnail) => (
                        <Image src={thumbnail.src} alt={thumbnail.alt} key={thumbnail.src} />
                    ))
                }

Answer 2

Make showThumbs={false} it will solve the problem

<Carousel   autoPlay
    infiniteLoop
    showStatus={false}
    showIndicators={false}
    showThumbs={false}
    interval={3000}>
                <div>
                    <Image src={sliderImg_1} alt="slider-1" />
                   
                </div>
                <div>
                    <Image src={sliderImg_2} alt="slider-2" />
                   
                </div>
                <div>
                    <Image src={sliderImg_3} alt="slider-3"/>
                    
                </div>
                <div>
                    <Image src={sliderImg_4} alt="slider-4"/>
                    
                </div>
            </Carousel>