so this is my problem. I use react-slick for mobile sliding which is wrapped with react-zoom-pan-pinch TransformWrapper and TransformComponent. This is my code:

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

    render() {
        const settings = {
            dots: true,
            arrows: false,
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            speed: 500,
            swipeToSlide: true,
            swipe: true,                
        }

        return (<Slider {...settings}>
            {this.props.data?.map((image, index) => (
                <div key={index} className="main-image">
                    <TransformWrapper>
                        <TransformComponent>

                            <img
                                src={clientConfig.IMAGE_PATH_L + image + clientConfig.IMAGE_FORMAT}
                                alt=""
                            />
                        </TransformComponent>
                    </TransformWrapper>
                </div>
            ))}
        </Slider>);
    }
}

So, problem is that when I wrap the image with Transform - s image is zoomable but not slidable. I need it to be zoomable and slidable. If I wrap called component itself like this:

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

Then the image is zooming endlessly. And also not sliding.

I have tried other zoom packages but I was told to use react-zoom-pan-pinch.