How to use REF with motion library REACT

Question

I'm starting to dabble with React. At the moment I have 3 components. A parent component, which returns a child with an inner child.

<Parent>
    <Child>
        <InnerChild></InnerChild>
    </Child>
</Parent>

My goal is such that when the innerchild performs an action, it performs a callback and a method within child will be performed.

Following this link, I tried to make a REF to child Call child method from parent

Child.js (using motion library https://github.com/framer/motion)

export const Positioner = React.forwardRef(({ 
    zIndex = 200, 
}, ref) => {
    const [posZIndex, setIndex] = React.useState(zIndex);
    const toggleZIndex = () => {
        alert("child action triggered")
    };
    return (
        <motion.div style={styles} {...framer} ref={ref}>
            {children}
        </motion.div>
    );
})

Parent.js

export const Parent = props => {

    const childRef = useRef();
    const handleMenuToggleCallback = (isOpen) => {
        console.log("handleMenuToggleCallback is called");
        this.childRef.toggleZIndex (isOpen);
    }

    return      
       <Child ref={childRef}>
            <InnerChild handleCallback={handleMenuToggleCallback}/>
        </Positioner>
}

The inner child successfully performs a callback. But unfortunately childRef isn't working. I can see this error No ref found. Ensure components created with motion.custom forward refs using React.forwardRef`

May I ask how to properly notify my child functional component.