I have installed react-zoom-pan-pinch and it conflicts with react-slick because react-zoom-pan-pinch has flex in it. So when I load slides using react-slick it maximizes the image infinitely (I guess). This is code sample:

<TransformWrapper>
    <TransformComponent>
         <MobileZoomImageSlider
               data={variantProducts[selectedProductId]?.images}
         />
    </TransformComponent>
</TransformWrapper>

This must work if width <= 767. Everything works correctly without TransformWrapper and TransformComponent, but this is the task.

Inside this component <MobileZoomImageSlider /> is Slider. Here is the code

export default class MobileZoomImageSlider extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const settings = {
            dots: true,
            arrows: false,
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            touchThreshold: 150,
            speed: 1000,
            responsive: [
                {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        }

        return (<Slider {...settings}>
            {this.props.data?.map((image, index) => (
                <div key={index} className="main-image" >
                    <img
                        src={clientConfig.IMAGE_PATH_L + image + clientConfig.IMAGE_FORMAT}
                        alt=""
                    />
                </div>
            ))
            }
        </Slider>);
    }
}

If I wrap with TransformWrapper and TransformComponent <img src {clientConfig.IMAGE_PATH_L + image + clientConfig.IMAGE_FORMAT} alt="" /> It's not zooming image infinitely BUT slick-slider is not sliding.

If there is any way to turn off flex from these Transformers please let me know guys.