How to force update current slide in Swiper?

Question

I have some images and slider with these images. I'm trying update current active slide with onClick event: (clicked image must be active slide) In following code i've tried to change first-indexed image, but it doesn't work with Swiper, so I need force rerender my Swiper-slider, for the reason it started from first. So the main goal is to make the clicked image the current slide

    const [prev, setPrev] = useState()
    const [ImageArray, setImageArray] = useState([item1, item2, item3])
    const [slidesArray, setSlidesArray] = useState([item1, item2, item3])
    
    const swiper = useSwiper()
    
    const clickHandler = (image: any) => {
        if (prev !== image) {  //if clicked not the same
            let index = slidesArray.indexOf(image) // find index of image in image array
            let temp = [...slidesArray]
            temp.splice(index, 1) //delete selected image
            temp.unshift(image) // set first 
            setSlidesArray([...temp])
            setPrev(image)
            swiper.reInit() //not working
        }
    }

            <div className={classes['Gallery__container']}>
                {ImageArray.map((image, index) => (
                    <img src={image} alt="" key={index} width={200} height={200} onClick={() => clickHandler(image)}/>
                ))}
            </div>

             <Swiper
                    spaceBetween={50}
                    slidesPerView={'auto'}
                    loop
                    zoom={true}
                >
                    {slidesArray.map((image,index) => (
                        <SwiperSlide key={index}>
                            <img src={image} alt="" width={200} height={200}/>
                        </SwiperSlide>
                    ))}
                </Swiper>

P.S. my code is working and first slide is changing, but I need to change the current