reactjs - react-gesture と react-spring でドラッグを有効にして div に境界を設定する必要がある

Question

react-use-gestureドラッグ イベントで div を移動するためにパッケージを使用していますが、境界を設定する必要があります。

これらの境界を設定するには、Spring の補間メソッドを使用する必要がありますuseSpring().setか?それともメソッドにパラメーターを追加する必要がありますか?

速度がなくても問題ありませんが、useSpring().setメソッドに速度パラメーターが必要です

サンドボックス

import { useSpring, interpolate, animated, config } from "react-spring";
import { useDrag } from "react-use-gesture";

export default function App() {
  const [{ pos }, set] = useSpring(() => ({ pos: [0, 0] }));
  const bind = useDrag(
    ({
      xy,
      previous,
      down,
      movement,
      direction,
      velocity,
      memo = pos.getValue()
    }) => {
      set({
        pos: add(movement, memo),
        immediate: down,
        config: {
          clamp: true,
          velocity: scale(direction, velocity),
          decay: true
        }
      });
      return memo;
    }
  );
  return (
    <animated.div
      {...bind()}
      className={"mydiv"}
      style={{
        transform: pos.interpolate(x => `translateX(${x}px)`)
      }}
    >

    </animated.div>
  );
}