React - Product Fly to cart animation using framer-motion

Question

i want an animation that takes the product Card and put it on the card like a fly animation and i want to use the framer-motion the problem that i have is when i set the x,y of the animation all of them goes to the same place

i tried the GSAP library but i didn't know how to manage it.

if there's any other libraries that i can use with explaination feel free to share

Here's my code :

  const [xValue, setxValue] = useState(0);
  const [yValue, setyValue] = useState(0);

  const handleClick = async (p) => {
    await set_order({
      ...order,
      products: {
        ...order?.products,
        [order?.products?.length]: { ...p, qte: 1 },
      },
      
    });
    setxValue(45);
    setyValue(45);

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1, x : xValue , y : yValue }}
        transition={{ duration: 1 }}
        exit={{ opacity: 0 }}
      >
        <Card
          // ref={ref_card}
          onClick={() => handleClick(product)}

i tried the gsap library and now im trying the framer motion couldn't find that much resources that have this kinda of animation i only found one that uses the gsap and i couldn't apply it

thank you for sharing any informations regarding this issue