Assign swiper slide to state

I’m new to React and using hooks. How can I assign Swiper navigation to useState? I want to have 4 buttons that handle each slide, so that if any button clicked it would scroll to the specified Screen instead of just previous and next?

import React, { useState, useCallback, useRef, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { EffectCoverflow, Pagination, Navigation } from "swiper/modules";

const sliderRef = useRef(null);

  const handlePrev = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slidePrev();
  }, []);

  const handleNext = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slideNext();
  }, []);

const Slider = () => {
 return (
  <Swiper
    effect={"coverflow"}
    grabCursor={false}
    centeredSlides={true}
    loop={false}
    ref={sliderRef}
    slidesPerView={"auto"}
    coverflowEffect={{
        rotate: 0,
        stretch: 0,
        depth: 50,
        modifier: 2.5,
    }}
    pagination={{ el: ".swiper-pagination", clickable: true }}
    navigation={{
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
      clickable: true,
      }}
    modules={[EffectCoverflow, Pagination, Navigation]}
    >
      <SwiperSlide>
         <IntroScreen />
       </SwiperSlide>
       <SwiperSlide>
         <SuccessScreen />
       </SwiperSlide>
       <SwiperSlide>
         <PaymentScreen />
       </SwiperSlide>
       <SwiperSlide>
         <FinalScreen />
       </SwiperSlide>

       <div className="slider-controler">  
         <button onClick={handleIntroScreen} />
         <button onClick={handleSuccessScreen} />
         <button onClick={handlePaymentScreen} />
         <button onClick={handleFinalScreen} />
       </div>
    </Swiper>
)
}

I would appreciate any help please

>Solution :

to control the Swiper slides using separate buttons for each slide, and you’re using Swiper’s navigation and pagination features

import React, { useState, useRef, useCallback } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "swiper/css/navigation";
import SwiperCore, { EffectCoverflow, Pagination, Navigation } from "swiper";

// Initialize Swiper modules
SwiperCore.use([EffectCoverflow, Pagination, Navigation]);

const Slider = () => {
  const sliderRef = useRef(null);
  const [activeSlide, setActiveSlide] = useState(0);

  const handleSlideChange = (swiper) => {
    setActiveSlide(swiper.realIndex);
  };

  const handleSlideButtonClick = (index) => {
    if (sliderRef.current) {
      sliderRef.current.swiper.slideTo(index);
      setActiveSlide(index);
    }
  };

  return (
    <div>
      <Swiper
        effect="coverflow"
        grabCursor={false}
        centeredSlides={true}
        loop={false}
        ref={sliderRef}
        slidesPerView={"auto"}
        coverflowEffect={{
          rotate: 0,
          stretch: 0,
          depth: 50,
          modifier: 2.5,
        }}
        pagination={{ el: ".swiper-pagination", clickable: true }}
        navigation={{
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          clickable: true,
        }}
        onSlideChange={handleSlideChange}
      >
        <SwiperSlide>
          <IntroScreen />
        </SwiperSlide>
        <SwiperSlide>
          <SuccessScreen />
        </SwiperSlide>
        <SwiperSlide>
          <PaymentScreen />
        </SwiperSlide>
        <SwiperSlide>
          <FinalScreen />
        </SwiperSlide>
      </Swiper>

      <div className="slider-controler">
        <button onClick={() => handleSlideButtonClick(0)}>Intro</button>
        <button onClick={() => handleSlideButtonClick(1)}>Success</button>
        <button onClick={() => handleSlideButtonClick(2)}>Payment</button>
        <button onClick={() => handleSlideButtonClick(3)}>Final</button>
      </div>
    </div>
  );
};

export default Slider;