react-slick与react-image-zoom冲突图像缩放不起作用

Question

我想使用像电子商务产品这样的多滑块缩放图像 但react-image-zoom与react-slick冲突

import Slider from 'react-slick';
import ReactImageZoom from 'react-image-zoom';

class product extends Component {
render(){

var products = {
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false,
        arrows: true,
        fade: true
    };

const props = {
        width: 480,
        height:680,
        scale:0.8,
        zoomWidth:500,
        offset:{"vertical":0,"horizontal":10},
        img: "../../assets/images/fashion/product/1.jpg",
        zoomLensStyle:"opacity: 0.4;background-color: black;"
    };

return (
<Slider {...products} className="product-slick">
        <div>
           <ReactImageZoom {...props} />
        </div>
        <div>
           <ReactImageZoom {...props} />
        </div>
        <div>
           <ReactImageZoom {...props} />
        </div>
</Slider>)
  }
}

export default Product;

仅最后一张幻灯片图像缩放有效

任何人都请帮助， 谢谢