реагировать-пружина и реагировать-пересечение-наблюдатель - тонны перерисовок

Question

JSFiddle

Код:

export default function App() {
  const spring = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } });

  const [ref] = useInView();

  rerenders++;
  return (
    <div style={{ height: "200vh" }}>
      <div style={{ height: "150vh" }}></div>
      <animated.div
        ref={ref}
        style={{
          height: "50px",
          width: "50px",
          backgroundColor: "red",
          opacity: spring.opacity
        }}
      >
        Hello!
      </animated.div>
    </div>
  );
}

Прикрепление useInViewс ref (крючок от react-intersection-observer) вызывает постоянную перерисовку компонента. Почему это так?

Самостоятельное использование IntersectionObserver такого не делает:

  const ref = useRef<any>();
  
  useLayoutEffect(() => {
    const obs = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry, index) => {
        console.log(entry);
      });
    });
    obs.observe(ref.current);
  }, []);