I am using framer motion in Next JS and having a hard time scaling object when the object comes into view after scrolling
Here is code sample

const Repair = () => {
  const targetRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: targetRef,
    //      target container
    offset: ["start center", "end start"],
  });

  const test = useTransform(scrollYProgress, [0, 0.7, 1], [1, 5, 0.8]);
  const moveX = useTransform(scrollYProgress, [0, 0.5, 1], [0, -200, -500]);

  useEffect(() => {
    console.log("Scroll Progress: ", scrollYProgress);
    console.log("Test: ", test);
  }, [scrollYProgress]);

return(
    <motion.div
       ref={targetRef}
       style={{
       scale: test,
       }}
       className="absolute top-[70px] left-[230px] lg:top-[30px] lg:left-[350px]"
       >
         <p className="text-white text-[18px] bg-purple-800">Random text</p>
     </motion.div>
)

I checked in dev tools and for some reason transform:none class is applied to the motion div
I have tried everything and can't figure out what is the issue. Any guidance will help