Motion: How to bind motionvalue to drag? Updating drag programmatically

[RuudBurger]

I want to create a scrollbar which you can both drag (1), click on the bar (2) and moves when you scroll the page (3).

Currently 1 and 2 is possible with the drag + dragControls.start(event, { snapToCursor: true }), but there is no way of setting the drag position programmatically. Something like dragControl.set({ x: 100}.

Previously you could bind a motionvalue to the x, like shown here: https://codesandbox.io/s/framer-motion-path-drawing-drag-and-usetransform-jnqk2?fontsize=14&module=/src/Example.tsx&file=/src/Example.tsx but that isn't possible anymore.
With that you could update the motionvalue externally:

export const Example = () => {
  const x = useMotionValue(0);
  const spring = useSpring(x);

  // Set externally example
  React.useEffect(() => {
    setInterval(() => {
      x.set(x.get() + 10)
    }, 1000)
  }, [x])

  return (
    <motion.div className="example-container" style={{ background: 'red' }}>
      <motion.div
        className="box"
        style={{ x: spring }}
        drag="x"
        dragConstraints={{ left: 0, right: 0 }}
      >
      </motion.div>
    </motion.div>
  );
};

[mattgperry]

The approach in the linked sandbox is fixed in 2.4