How to use the @popmotion/popcorn.distance function in @popmotion/popcorn

!session.current ||
            !lastMoveEvent.current ||
            !lastMoveEventInfo.current
        ) {
            warning(false, "onPointerMove fired without pointer session")
            cancelPan()
            return
        }

        const info = getPanInfo(lastMoveEventInfo.current)
        const panStarted = session.current.startEvent !== undefined

        // Only start panning if the offset is larger than 3 pixels. If we make it
        // any larger than this we'll want to reset the pointer history
        // on the first update to avoid visual snapping to the cursoe.
        const distancePastThreshold = distance(info.offset, { x: 0, y: 0 }) >= 3

        if (!panStarted && !distancePastThreshold) return

        const { point } = info
        const { timestamp } = getFrameData()
        session.current.pointHistory.push({ ...point, timestamp })

        const { onPanStart, onPan } = handlersRef.current

        if (!panStarted) {
            onPanStart && onPanStart(lastMoveEvent.current, info)
            session.current.startEvent = lastMoveEvent.current
        }

        onPan && onPan(lastMoveEvent.current, info)
    }

const Square = ({ active, setActive, colIndex, rowIndex, itemIndex, x, y }) => {
    const isDragging = colIndex === active.col && rowIndex === active.row
    const diagonalIndex = (360 / 6) * (colIndex + rowIndex)
    const d = distance(
        { x: active.col, y: active.row },
        { x: colIndex, y: rowIndex }
    )
    const dx = useSpring(x, {
        stiffness: Math.max(700 - d * 120, 0),
        damping: 20 + d * 5,
    })
    const dy = useSpring(y, {
        stiffness: Math.max(700 - d * 120, 0),
        damping: 20 + d * 5,
    })

    return (

action(({ update }) => {
    const output = {
      touches: points,
      scale,
      rotate
    };

    let initialDistance = 0.0;
    let initialRotation = 0.0;

    const isGesture = points.length > 1;

    if (isGesture) {
      const [firstTouch, secondTouch] = points;
      initialDistance = distance(firstTouch, secondTouch);
      initialRotation = angle(firstTouch, secondTouch);
    }

    const updatePoint = () => {
      if (isGesture) {
        const [firstTouch, secondTouch] = points;
        const newDistance = distance(firstTouch, secondTouch);
        const newRotation = angle(firstTouch, secondTouch);

        output.scale = scale * (newDistance / initialDistance);
        output.rotate = rotate + (newRotation - initialRotation);
      }

      update(output);
    };

const updatePoint = () => {
      if (isGesture) {
        const [firstTouch, secondTouch] = points;
        const newDistance = distance(firstTouch, secondTouch);
        const newRotation = angle(firstTouch, secondTouch);

        output.scale = scale * (newDistance / initialDistance);
        output.rotate = rotate + (newRotation - initialRotation);
      }

      update(output);
    };