how to fully control the drag position of any draggable object?

[sairajchouhan]

when I move the cursor, I want to move the draggable object with 2x speed, or 0.5x speed how can we do this?
The code below is my current approach, but this is not controlled fully, even if I remove the style attribute dragging works, I want the drag position to be fully controlled to set how the dragging happens

export function Temp() {
  const dragControls = useDragControls();
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
    dragControls.start(event);
  };

  return (
    <div>
      <motion.div
        dragListener={false}
        drag={true}
        dragMomentum={false}
        dragElastic={false}
        className="h-48 w-48 bg-slate-600"
        style={{
          x: x.get(),
          y: y.get(),
        }}
        onPointerDown={handlePointerDown}
        dragControls={dragControls}
        onDrag={(_, info) => {
          x.set(info.offset.x);
          y.set(info.offset.y);
          // ideally I should be able to do this, so that it moves only 0.5px for every 1px cursor movement
          // x.set(info.offset.x / 2)
          // y.set(info.offset.y / 2)
        }}
      />
    </div>
  );
}