Framer Motion useScroll does not work when container prop is declared

Question

Basically, when useScroll is used on its own without attaching the container prop, it detects the scroll and changes the motion value. But I do not want this because it detects the entire page.

I just want to detect the scroll progress for a specific section, the section where the ref is declared to - in this case the parent <div>. However, when you add in a container: prop to the hook, it does not detect scrolling. Here is my code:

import { useRef } from "react";
import {
  motion,
  useMotionValueEvent,
  useScroll,
  useTransform,
} from "motion/react";

export default function Home() {
  const ref = useRef(null);
  const { scrollY } = useScroll({
    container: ref,
  });

  useMotionValueEvent(scrollY, "change", (latest) => {
    console.log("Latest: ", latest);
  });

  const opacity = useTransform(scrollY, [0, 500], [1, 0]);

  return (
    <div ref={ref} style={{ overflow: "scroll" }}>
      <motion.div
        className="w-20 h-20 bg-dark"
        style={{ opacity, y: scrollY }}
      />
      <div className="h-screen"></div>
      <div className="h-screen"></div>
      <div className="h-screen"></div>
    </div>
  );
}

The console.log in useMotionValueEvent always logs 1 once when container: ref is declared. But doesn't change as I scroll.

I have followed their documentation but no luck.

Already tried changing the parent div to motion.div but it is still the same. Also tried specifying the offset parameter but it's still the same.