I use the swiper from react.js, but the operation of the image is different from the local server and the actual server

Question

Locally, when you press the next button or the previous button, you go one by one, but on the actual production site, you go two by one. Local init is [f, f, f], but it appears as [f, f, f, f] on the production server. (A total of 6 images)

If you reload it from a page that contains that component, it will run as normal. If you refresh it, it's working normally

Below is the corresponding code.

<div class="crs_meal slider_type2">
      <div class="img_slider prod2_2 swiper-container">
        <div class="swiper-wrapper">
          <Swiper
            modules={[FreeMode, Navigation, Thumbs]}
            thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
            spaceBetween={0}
            navigation={true}
          > 
            {props.images.map(image => {
                return (
                  <SwiperSlide>
                  <img src={image.src} key={image.src} className="fit_img"/>
                  </SwiperSlide>
                )
            })} 
          </Swiper>
        </div>
      </div>

      <div class="thumb_slider crs1_1 swiper-container">
        <Swiper
          onSwiper={setThumbsSwiper}
          modules={[FreeMode, Navigation, Thumbs]}
          spaceBetween={10}
          slidesPerGroup={1}
          slidesPerView={4}
          freeMode={true}
          watchSlidesProgres={true}
        >  
          {props.images.map(image => {
              return (
              <SwiperSlide className="swiper-slide">
              <img src={image.src} key={image.src} className="fit_img"/>
              </SwiperSlide>
              )
          })}
        </Swiper>
      </div>
    </div>

2 seconds after the swiper component was set, I only set the same image to the new variable as I thought it would need to be refreshed. However, since the data is set after 2 seconds, an error occurs because the swiperImages does not have a value before 2 seconds. How should I resolve this?

Below is the corresponding code.

export default function CustomSwiper(props) {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const [swiperImages, setSwiperImages] = useState();

  useEffect(() => {
    /* Set a timer that runs once after 2 seconds */
    const timeoutId = setTimeout(() => {
      console.log("Run in 2 seconds");
      setData();
    }, 2000);
    
    /* Clean up timeout when components are unmounted */
    return () => clearTimeout(timeoutId);
  }, []); /* Hand over empty arrays and run only when components are mounted */

  function setData() {
    /* Perform the tasks required for renewal */
    const newData = [...props.images];
    setSwiperImages(newData);
  }

  return (
    <>
    <div class="crs_meal slider_type2">
      <div class="img_slider prod2_2 swiper-container">
        <div class="swiper-wrapper">
          <Swiper
            /* onInit={(swiper) => this.setData()} */
            modules={[FreeMode, Navigation, Thumbs]}
            thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
            spaceBetween={0}
            navigation={true}
            slidesPerGroup={1}
          > 
            {(swiperImages && swiperImages.length > 0 ? swiperImages : props.image).map(image => {
                return (
                  <SwiperSlide>
                    <img src={image.src} key={image.src} className="fit_img"/>
                  </SwiperSlide>
                )
            })} 
          </Swiper>
        </div>
      </div>

      <div class="thumb_slider crs1_1 swiper-container">
        <Swiper
          onSwiper={setThumbsSwiper}
          modules={[FreeMode, Navigation, Thumbs]}
          spaceBetween={10}
          slidesPerGroup={1}
          slidesPerView={4}
          freeMode={true}
          watchSlidesProgres={true}
        >  
          {(swiperImages && swiperImages.length > 0 ? swiperImages : props.image).map(image => {
              return (
              <SwiperSlide className="swiper-slide">
                <img src={image.src} key={image.src} className="fit_img"/>
              </SwiperSlide>
              )
          })}
        </Swiper>
      </div>
    </div>
    </>
  );
}