如何让拇指随着反应刷卡轮播中的主幻灯片而变化？

Question

主滑动器幻灯片（class=testimonial）按预期垂直旋转，但拇指（class=gallery-thumbs）是静态的

我已经按照 react swiper 演示创建了带拇指的旋转木马。

我原以为拇指会随着主幻灯片旋转到中心焦点，但拇指不会移动。我没有收到任何错误。

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, EffectCoverflow, Thumbs, Autoplay } from 'swiper';
import { useState } from 'react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow';
import 'swiper/css/thumbs';

export default function TestimonialSection() {

    const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <section id="testimonial" className="spacer">
      <div className="testimonial-section">
        <div className="testi-user-img">
          <Swiper
            className="gallery-thumbs"
            spaceBetween={10}
            slidesPerView={4}
            // slideToClickedSlide
            watchSlidesProgress
            onSwiper={setThumbsSwiper}
          >
            <SwiperSlide>
              <img className="u3" src="http://placekitten.com/100/150" alt="" />
            </SwiperSlide>
            <SwiperSlide>
              <img className="u1" src="http://placekitten.com/100/150" alt="" />
            </SwiperSlide>
          </Swiper>
        </div>
        <div className="user-saying">
          <Swiper
            className="testimonial"
            spaceBetween={30}
            direction="vertical"
            pagination={{ clickable: true }}
            modules={[Navigation, Pagination, EffectCoverflow, Thumbs, Autoplay]}
            autoplay={{
              delay: 3000, 
              disableOnInteraction: false 
            }}
            // thumbs={{ swiper: ".gallery-thumbs" }}
            thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
          >
            <SwiperSlide>
              <div className="quote">
                <img className="quote-icon" src="https://md-aqil.github.io/images/quote.png" alt="" />
                <p>
                  "Lorem ipsum"
                </p>
                <div className="name">-Ben Dover-</div>
                <div className="designation">Student</div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="quote">
                <img className="quote-icon" src="https://md-aqil.github.io/images/quote.png" alt="" />
                <p>
                  "Lorem ipsum"
                </p>
                <div className="name">-Ben Dover-</div>
                <div className="designation">Student</div>
              </div>
            </SwiperSlide>
         </Swiper>
        </div>
    </div>
    </section>

    )
}