Framer Motion transform property not working for Image

Question

I am trying to move a hero image up when the user scrolls down to give a parallax effect, however, the animation is not happening - what am I doing wrong here?

export default function HeroSection({ params }) {
  const target = useRef(null);
  const offset = ["end, end", "end start"];
  const { scrollYProgress } = useScroll({
    target,
    offset,
  });

  const transform = useTransform(scrollYProgress, [0, 1], [0, -200]);

  return (
    <section
      ref={target}
      className="z-0 h-[100vh] w-full">
      <motion.div
        className="z-10 absolute w-full h-screen overflow-hidden"
        style={{
          y: transform,
        }}>
        <Image
          src={HeroBackground}
          className="object-cover object-center md:object-top"
        />
      </motion.div>
      <div className="flex h-full md:max-w-[1000px] m-auto px-5">
        <div className="flex flex-col gap-3 sm:gap-6 pt-8 sm:pt-10 md:pt-12 mt-[56px] sm:mt-[72px] ">
          <h1 className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-extrabold z-50 text-white tracking-tight">
            {translations[params.lang].heading}
          </h1>
          <div className="flex flex-col sm:max-w-[60%] md:max-w-[50%]">
            <p className="font-medium z-50 text-white">{translations[params.lang].subheading}</p>
          </div>
          <div className="z-50">
            <SubscribeForm lang={params.lang} />
          </div>
        </div>
      </div>
    </section>
  );
}

With this code I am expecting the image to move up 200px by the time the user has scrolled 1 height of the section which is 100vh. I cannot directly animate the Image component as it is not compatible with Framer Motion.

UPDATE

I get this in console;

Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.

UPDATE

Seems to work when I just dump the code directly into the page.