Реакция-пятно с реакцией-изображением-зумом конфликт изображения зум не работает

Question

Я хочу увеличить изображение с помощью мульти-слайдера, такого как продукт электронной коммерции, но реагировать-изображение-масштабировать конфликтует с реагированием-слик

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;

работает только последний слайд

кто-нибудь, пожалуйста, помогите, спасибо