Need to set boundaries to div with drag enabled with react-gesture and react-spring

Question

I'm using a react-use-gesture package to move a div on drag event but need to set boundaries.

Do I need to use the interpolate method from spring to set those boundaries or should I add parameters to the useSpring().set method?

Without velocity, it would be no problem but I need the velocity parameter on the useSpring().set method

Sandbox

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>
  );
}