reactjs - react-slick with react-image-zoom conflict image Zoomが機能しない

Question

eコマース製品のようにマルチスライダーでズーム画像が欲しいのですが、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;

最後のスライド画像のズームのみが機能しています

誰でも助けてください、ありがとう