I'm using useGuesture and to make some elements draggable in R3F.

When I start dragging (or even click the element) it moves to the center of the screen before it is then possible to drag it around.

How can I get it to drag from it's current position?

This is some code I've got from https://maxrohde.com/2019/10/19/creating-a-draggable-shape-with-react-three-fiber/ and tried to get it to work with objects that do not start in center of screen.

export default function Draggable(props) {
  const [position, setPosition] = useState(props.position);
  const { size, viewport } = useThree();
  const aspect = size.width / viewport.width;

  const bind: any = useGesture(
    {
      onDrag: ({ event, offset: [x, y] }) => {
        const [, , z] = position;
        setPosition([x / aspect, -y / aspect, z]);
      },
      onDragEnd: event => {
        props.onMove(position);
      },
      onClick: props.onClick,
    },
    { drag: { filterTaps: true } },
  );

  if (!props.children) return null;

  return (
    <mesh position={position} {...bind()}>
      {props.children}
    </mesh>
  );
}