Estoy usando useGuesture y para hacer que algunos elementos se puedan arrastrar en R3F.

Cuando empiezo a arrastrar (o incluso hago clic en el elemento), se mueve al centro de la pantalla antes de que sea posible arrastrarlo.

¿Cómo puedo hacer que se arrastre desde su posición actual?

Este es un código que obtuve de https://maxrohde.com/2019/10/19/creating-a-draggable-shape-with-react-three-fiber/ e intenté que funcionara con objetos que sí no comience en el centro de la pantalla.

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