我正在做一个电子商务项目，必须通过SSR获取产品详细信息数据并将其呈现在屏幕上。虽然数据显示正确，但我面临着显示产品图像的问题。我正在为图片库使用react-responsive-carousel组件，但它无法正常工作。你能给我提供一个例子，说明如何使用这个组件与SSR？

import { Carousel } from "react-responsive-carousel";

<Carousel
  showArrows={true}
  showThumbs={false}
  className="position-relative"
>
      {detaildata?.listingImages?.map((item,index) => (
        <React.Fragment key={index}>
    
           <Image
              className="d-block imgdiv" src={item} alt=""
              layout="fill"
              objectFit="cover"
            />
        
        </React.Fragment>
      ))}

</Carousel>

我的预期输出是图像在nextjs中使用SSR正确渲染。
我的输出屏幕。