npm i swiper

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import img1 from "../../../assets/images/store/product-detail/01.jpg";
import img2 from "../../../assets/images/store/product-detail/02.jpg";
import img3 from "../../../assets/images/store/product-detail/3.jpg";

const ProductDetail = () => {
      const [thumbsSwiper, setThumbsSwiper] = useState(null);
<div className = "product-vertical-slider" >
<div className = "slider__thumbs" >
< Swiper
      className = "swiper-container"
      breakpoints = {
            0: {
                  direction: 'horizontal',
                  slidesPerView: 3,
                  spaceBetween: 10,
            },
            768: {
                  direction: 'vertical',
                  slidesPerView: 4,
            }
      }
      slidesPerView = { 3}
      spaceBetween = { 24}
      slideToClickedSlide = { true}
      loop = { true}
      loopedslides = { 5}
      freeMode = { true}
      onSwiper = { setThumbsSwiper }
      mousewheel = { true}
      modules = { [FreeMode, Thumbs]}
            >
return (
<>
    <div>
      <SwiperSlide >
        <div className = "slider__image" >
            <img src = { img1 } alt = "" loading = "lazy" />
        </div>
      </SwiperSlide>
      < SwiperSlide >
        <div className = "slider__image" >
            60;img src = { img2 } alt = "" loading = "lazy" />
        </div>
      </SwiperSlide>
      < SwiperSlide >
        <div className = "slider__image" >
            <img src = { img3 } alt = "" loading = "lazy" />
        </div>
      </SwiperSlide>
    </div>
</>
)
}

• Enter Breakpoint Value according to your UI design