Animating SVG path points independently in Framer Motion

Question

I'm trying to animate control points on SVG path independently. Let's say I want to draw a line from two points, point A on the left at (0, yA) and point B on the right at (100, yB).

I'd like to move yA to a random value within [0, 100]. After it's done animating, I'll ask it to move to another random value again, etc. Same as for B.

I have the following setup:

const yA = useMotionValue(10)
const yB = useMotionValue(80)

React.useEffect(() => {
  const controlA = animate(yA, Math.random() * 100, {
    duration: Math.random() * 4,
    onComplete: () => {
      // I'll ask it to animate again here
    }
  })
  return controlA.stop
}, [])

// same thing for point B...

return(
  <svg
    viewBox="0 0 100 100"
    width="100"
    height="100"
  >
    <motion.path d={`M 0 ${yA.get()} L 100 ${yB.get()}`} />
  </svg>
)

Currently I can't even get point A to move once. Printing out latest with onUpdate seems fine. Not sure how to get yA's value to d attribute though. Or do I have to animate the whole attribute with Framer Motion? Seems like other libraries can do that IIRC.