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