Framer Motion props not accept proper types, when used with Flex component by doing "as={motion.div}"

[sayshark75]

Description

When I was Imported

import { useScroll, useTransform, motion } from "framer-motion";
import { Flex } from "@chakra-ui/react";

then Setup the scroll progress

const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: heroRef,
    offset: ["start start", "end end"],
  });
const headingFadeIn = useTransform(scrollYProgress, [0, 0.2], [0, 1]);

and used Flex this way, using as prop

<Flex as={motion.div} style={{ opacity: headingFadeIn }} pos={"absolute"} top={"37%"} left={"6.4%"}>

the Opacity prop, whether I use it directly or using the style object, it shows this type error

Type 'MotionValue<number>' is not assignable to type 'Opacity | undefined'.

can someone update the Types to accept motion values

Link to Reproduction

na

Steps to reproduce

Provided in Description

Chakra UI Version

2.8.2

Browser

Google Chrome Version 124.0.6367.119 (Official Build) (64-bit)

Operating System

• macOS
• Windows
• Linux

Additional Information

"@chakra-ui/next-js": "^2.2.0",
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"framer-motion": "^11.1.9",
"next": "^14.2.3",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.2.1"

Allow Types MotionValue<number> | MotionValue<string> | MotionValue<number | string>

Also props like "x,y" are missing