My element does not move accordingly to onPanResponderMove

Question

I succeeded to use the panResponder and to move the element inside the image, but it doesn't move accordingly to the mouse, its too fast and doesn't stay in the image borders.

**State x and state y is the length of the array. I added a button that every click on it will open another inputText and push it to the array

DragTextView.js:

 this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
            onPanResponderGrant: (evt, gestureState) => {
                // then start dragging
            },
            onPanResponderMove: (evt, gestureState) => {
                // then dragging
                console.log("evt = ", evt.target);
                console.log("gestureState = ", gestureState);
                this.setState({
                    x: this.state.x + gestureState.dy,
                    y: this.state.y + gestureState.dx,
                });
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                // then finish dragging
            },
            onPanResponderTerminate: (evt, gestureState) => {
            },
            onShouldBlockNativeResponder: (evt, gestureState) => {
                return true;
            },
        });