React Framer motion- get child component y position to parent and pass it to another child

Question

I'm trying to do shared transition animation using framer motion.

This is the preview what i got so far https://ibb.co/y466L5c

I need to pass y position of a selected card to detailview component I already passed it to parent component.But its only showing on console.log. Cannot pass it to next component

This is the card component

const Vibes: React.FC<Props> = ({ events,printYValue}) => {
let currentTop: number = 0;

const [position, setPosition] = useState<number>();

const inputRef = useRef<HTMLDivElement>(null);

const handleTap = () => {

 if (inputRef.current)
 {
   currentTop = -Math.abs(inputRef.current.getBoundingClientRect().y);
   setPosition(currentTop);
   printYValue(currentTop);
 }
};


return (
<div className="oholder">
  <div
    ref={inputRef}
    className="VibeCard-card background-img"
    style={{ backgroundImage: `url('${events.image_url}')` }}
    onClick={() => handleTap()}>

    <div className="mask"></div>
    <div className="card-caption">
      <IonRow className="ion-align-items-end">
        <IonCol className="caption-text">
          <div className="card-title ">
            <h1>{events.title}</h1>
          </div>
          <div className="caption-title">{events.caption}</div>
          <div className="caption-time">discover</div>
        </IonCol>
      </IonRow>
    </div>
  </div>
  
 </div>
 );
};

This is the detailsview component

type Props =
{
  isVisible: boolean;
  onClose: () => void;
  id:number,
  prevYPosition:number
};

const Overlay: React.FC<Props> = ({ isVisible, onClose, id,prevYPosition}) => {
const events: any[] = [...EVENTS];
const [position, setPosition] = useState<number>();
const singlecard = events.find((item)=>item.id === id)

const targetRef = useRef();

const variants = {
open: {
  zIndex: 1,
  scale: 1,
  y: 0,
},
collapsed: {
  zIndex: 100,
  y: position,
  scale: 1.2,
  transition: { duration: 0.2 }
 },
};

useEffect(() => {
 setPosition(prevYPosition)
}, []);

const handleTap = () => {
  if (onClose) {
    onClose();
  }
};

return (
<div  className="over-back">
  <AnimatePresence>
    {isVisible && (
      <motion.div
        className="overlayy"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.5 }}
        onClick={() => handleTap()}
      >
        <motion.div
        
          className="VibeCard-card background-img"
          style={{ backgroundImage: `url('${singlecard.image_url}')` }}
          onClick={() => handleTap()}

          initial={{  zIndex: 1,
            scale: 1, y: position, }}
          animate={{
            zIndex: 100,
            y: 0,
            scale: 1.2,
            transition: { duration: 0.5 }

           }}
          exit={{ opacity: 0,y: 300,}}
        
        >
          <div className="overlay"></div>
          <div className="card-caption">
            <IonRow className="ion-align-items-end">
              <IonCol className="caption-text">
                <div className="card-title ">
                  <motion.h1>
                    {singlecard.title}
                  
                  </motion.h1>
                </div>
                <div className="caption-title">{singlecard.caption}</div>
                <div className="caption-time">discover   {id}</div>
              </IonCol>
            </IonRow>
          </div>
        </motion.div>
      </motion.div>
    )}
  </AnimatePresence>
</div>
 );
};

 Overlay.defaultProps = {};

 export default Overlay;

This is parent component

 Props = {

 };

 const Discover: React.FC<Props> = ({  }) => {
 const events: any[] = [...EVENTS];

const [selected, setSelected] = useState(0);
const [isActive, setActive] = useState(false);
const [prevYposi,setPrevYPosi] = useState<number>(0);

let currentTop: number = 0;

const handleStart = (actnum: number) => {
setActive(true);

if (isActive === false) {
  setSelected(actnum);
}

console.log(prevYposi)

};

const HnadleOverlay = () => {
  setTimeout(() => {
  setActive(false);
  console.log("overlay removed");
  }, 500);
};

const printyvalue = (arg:number) =>{
  console.log(arg).                   //here i'm getting correct value.But can't
                                       it won't update the Yposi in other component
  setPrevYPosi(arg);
  }


useEffect(() => {
  console.log(currentTop);
}, []);

return (
  <IonPage>
    <IonHeader className="header-custom"></IonHeader>

    <IonContent className="discover-page ion-padding">
        <IonRow>
          <IonCol size="12">
            {events.map((event, index) => (
              <IonCol
                size="6"
                key={event.id}
                onClick={() => handleStart(event.id)}
              >
                <Vibes printYValue={printyvalue} events={event} />
              </IonCol>
            ))}
          </IonCol>
        </IonRow>
      </div>
    </div>

    <Overlay
      prevYPosition={prevYposi}  // prevYposi always getting the start value 
      isVisible={isActive}
      onClose={HnadleOverlay}
      id={selected}
     />
     </IonContent>
    </IonPage>
  );
 };

 Discover.defaultProps = {};

 export default Discover;