REACT JS: change data in swiperslide using another swiperslide in swiper-react

Question

I am trying to change the data in one slider, by sliding the other slider. Basically I want to map the data from an api in first slider, then the active slider's id will be sent to the second api, which will return the data to be rendered in the second slider. I have done the data changing work in options tag but I have no idea how can i do it in Swiperslide, i tried to do it using onSlideChange but it did not work from me.

Code for simple options tag:

import React, { useState, useEffect } from "react";
import { podCastLatestSliderApi } from "../../../Services/podCastApi";

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);
  const [topRatedData, setTopRatedData] = useState([]);
  const [tvShowDetails, setTvShowDetails] = useState(null);

  const fetchData = (id) => {
    fetch(`${process.env.REACT_APP_API}/api/tv-shows/get-tvShow-details/${id}`)
      .then((res) => res.json())
      .then((result) => {
        if (result && result.tvShowDetails) {
          setTvShowDetails(result.tvShowDetails);
        } else {
          setTvShowDetails(null);
        }
      });
  };

  useEffect(() => {
    podCastLatestSliderApi()
      .then((data) => {
        setTopRatedData(data.upcomingContent);
      })
      .catch((error) => {
        console.log(error, "TrendingApiData Slider error");
      });
  }, []);


  useEffect(() => {
    if (selectedOption) {
      fetchData(selectedOption.id);
    }
  }, [selectedOption]);

  const handleOptionChange = (e) => {
    const selectedId = e.target.value;
    const selectedOption = topRatedData.find(
      (option) => option._id === selectedId
    );
    setSelectedOption(selectedOption);
  };

  

  return (
    <div>
      <h1>TV Shows</h1>
      <div>
        <label>Select a TV show:</label>
        <select value={selectedOption?.id || ""} onChange={handleOptionChange}>
          <option value="">-- Select --</option>
          {topRatedData.map((option) => (
            <option key={option._id} value={option._id}>
              {option.title}
            </option>
          ))}
        </select>
      </div>
      {selectedOption && (
        <div>
          <h2>{selectedOption.title}</h2>
        </div>
      )}
    </div>
  );
};

export default MyComponent;

Now i want two swipers in jsx instead of options tag like below:

Main slider:

<Swiper
                    as="ul"
                    centeredSlides={true}
                    centeredSlidesBounds={true}
                    navigation={{
                      prevEl: "#prev4",
                      nextEl: "#next4",
                    }}
                    slidesPerView={5}
                    spaceBetween={20}
                    breakpoints={{
                      320: { slidesPerView: 1 },
                      550: { slidesPerView: 2 },
                      760: { slidesPerView: 3 },
                      991: { slidesPerView: 4 },
                      1400: { slidesPerView: 5 },
                    }}
                    loop={true}
                    className="list-inline p-0 m-0 row align-items-center iq-rtl-direction"
                  >
                    {topRatedData.length > 0 &&
                      topRatedData.map((data) => (
                        <SwiperSlide as="li" key={data.id}>
                          <Link to="#">
                            <div className="movie-slick position-relative">
                              <img
                                src={data?.thumbnail?.banner_thumbnail_url}
                                className="img-fluid"
                                alt=""
                              />
                            </div>
                          </Link>
                        </SwiperSlide>
                      ))}
                  </Swiper>

Slider where i want to change the data based on the first slider:

<Swiper
                    slidesPerView={1}
                    freeMode={true}
                    watchSlidesProgress={true}
                    id="trending-slider"
                    className="mt-3  list-inline p-0 m-0  d-flex align-items-center iq-rtl-direction"
                  >
<SwiperSlide as="li" key={selectedOption._id}>
<h1 className="trending-text big-title text-uppercase">
                                  {selectedOption.title}
                                </h1>
                                <div className="d-flex align-items-center text-white text-detail">
                                  <span className="badge badge-secondary p-3">
                                    {selectedOption?.media?.duration.toFixed(2)}
                                  </span>
                                  <span className="ml-3">3 Seasons</span>
                                  <span className="trending-year">
                                    {getDate(selectedOption.release_year)}
                                  </span>
                                </div>
</SwiperSlide>
</Swiper>