Привязка к позиции onDragEnd с motionValues ​​с использованием Framer Motion и React

Question

Я использую движок фреймера для создания взаимодействия в своем проекте.Я пытаюсь сделать так, чтобы, когда пользователь закончил перетаскивать дочерний элемент, он «защелкнулся» обратно в заданную позицию.

Я видел из документов, что вы можете использовать пружину для анимациизначение движения: const y = useSpring(x, { damping: 10 }), но я думаю, что я делаю это неправильно?Вот мой код:

export default function SwipeContainer(props) {
  const x = useMotionValue(0);
  const m = useSpring(x, { damping: 10 });

  const handleDragEnd = (evt) => {
    console.log(evt);
    m.set(200);
  }

  return (
    <div className={styles.swipeContainer}>
      <motion.div
        style= {{ x, m }}
        className={styles.motionDiv}
        drag="x"
        onDragEnd={handleDragEnd}
      >
        {props.children}
      </motion.div>
    </div>
  );

}

Я ожидаю, что когда произойдет событие dragEnd, дочерний объект будет анимирован до x: 200, но этого не происходит.Я неправильно устанавливаю значение или, может быть, это то, как я применяю значения движения к motion.div?