enableScrollSpy bugged about react-countup HOT 4 OPEN

import React from "react";
import ReactCounUp, { CountUpProps } from "react-countup";
import { useInView } from "react-intersection-observer";

// wrapper component
const CountUp: React.FC<CountUpProps> = React.memo(({ ...props }) => {
  const [startValue, setStartValue] = React.useState<number>();
  const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
  });
  
  // just so that the redraw property is set to true later, May there be is a better way to do that
  const { redraw, duration, ...rest } = props;
  // only re-ready when the focus change [inView]
  React.useEffect(() => {
    if (inView) {
      setStartValue(0);
      // start the count up
    } else {
      setStartValue(undefined);
    }
  }, [inView]);

  return (
    <div ref={ref}>
      <ReactCounUp start={startValue} redraw {...rest} />
    </div>
  );
});