How to use react-spring useScroll with Parallax

Question

So I try react-spring Animation and it works pretty good with parallax. I use react-spring/web for animation and react-spring/parallax for the parallax. Now I need to implement some scaling when I scroll, so I searched in the documentation, and found about useScroll hook that I can use to check scroll progress.

At first, I try:

function App() {
  const ref = useRef();

    const { scrollYProgress } = useScroll({
    container: ref,
    onChange: ({ value: { scrollYProgress } }) => {
      console.log( scrollYProgress)
    },
    default: {
      immediate: true,
    },
  })

  const springProps = useSpring({
    transform: `scale(${scale})`
  });

  return (
    <>
      <animated.Parallax pages={4} ref={ref}>
        {/* ... rest of parallax layers ... */}
        
        {/* foreground */}
        <ParallaxLayer className="w-screen " offset={0.7} speed={5}>
          <animated.img
            style={springProps}
            className=" w-screen object-cover"
            src={"/static/image/cloudfg.png"}
          />
        </ParallaxLayer>
        
        {/* ... rest of your layers ... */}
      </animated.Parallax>
    </>
  );
}

And it return error 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'. I thought this was because I try to access the reference of Parallax before it even render. I came with an idea (bad one) by using useEffect hook to check if ref changed. I modify it like this:

  const ref = useRef();
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(ref.current);
  }, [ref]);

  let scrollYProgress;
  if (isMounted) {
    // Call useScroll only after the component has rendered.
    ({ scrollYProgress } = useScroll({
      container: ref,
      onChange: ({ value: { scrollYProgress } }) => {
        console.log(scrollYProgress);
      },
      default: {
        immediate: true,
      },
    }));
  }

It then return: react-dom.development.js:16507 Uncaught Error: Rendered more hooks than during the previous render.

I think my way in implementing useScroll with Parallax is wrong. I try to get the scroll position using Parallax reference with ref.current and I can sort of get it with ref.current.current/ref.current.space that will return the current position. For example if I have 4 pages, then it return floating number from 0 to 4 based on my current position. But then again I need to update every component when I scroll the mouse, and this seems like a bad way to do it.

Anyone know how to handle useScroll with Parallax in react-spring ? Need some suggestion, any help is appreciated