Is Observer generally discouraged to use for React Swiper Component?

[allenOrangeXu]

Hi:
I've been playing around with React Swiper Component and have some question about the "Observer" parameter.
I have a sample code below:

import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

import "./styles.css";

export default function App() {
  const [test, setTest] = useState(false);
  return (
    <>
      <button
        onClick={() => {
          setTest(!test);
        }}
      >
        test
      </button>
      <Swiper
        className="mySwiper"
        observer={true}
        onObserverUpdate={(swiper, event) => {
          console.log("observe update!");
        }}
        slidesPerView={3}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        {test && <SwiperSlide>Slide Test</SwiperSlide>}
      </Swiper>
    </>
  );
}

Basically all it does is, add/remove a slide when click on the button and log the event if swiper has slide update. I checked my console and there's no console update when slide is added or removed. Based on the documentation (https://swiperjs.com/swiper-api#param-observer), seems it's suppose to get triggered? Is it not supposed to use with React and I should use useEffect/useLayoutEffect instead?