drag position first time dragging incorrect

[udarts]

I have a question regarding the same code I use in previous question: #1245

The issue I am having, is that I have or can have multiple images, and dragging is kinda going ok, except for the first time I am dragging each of them.
When dragging them the first time, the image is not in the same position as my finger (or mouse in test purpose). The second time is fine.

Below is the code I use:

import {
    PanGestureHandler,
    RotationGestureHandler,
    State,
} from 'react-native-gesture-handler';

const USE_NATIVE_DRIVER = true;

const StageGesture = ({child, imagetitle, stageimage, xval, yval, onPress, parent}) => {

    const panRef = useRef(null);
    const rotationRef = useRef(null);

    /* Dragging */
    const _translateX = useRef(new Animated.Value(xval)).current;
    const _translateY = useRef(new Animated.Value(yval)).current;
    const _lastOffset = { x: 0, y: 0 };
    const _onPanGestureEvent = useCallback(Animated.event(
        [
            {
                nativeEvent: {
                    translationX: _translateX,
                    translationY: _translateY,
                },
            },
        ],
        { useNativeDriver: USE_NATIVE_DRIVER }
    ));

    /* Rotation */
    const _rotate = useRef(new Animated.Value(0)).current;
    const _rotateStr = _rotate.interpolate({
        inputRange: [-100, 100],
        outputRange: ['-100rad', '100rad'],
    });
    let _lastRotate = 0;
    const _onRotateGestureEvent = useCallback(Animated.event(
        [
            { nativeEvent: { rotation: _rotate } }
        ],
        { useNativeDriver: USE_NATIVE_DRIVER }
    ));

    const _onRotateHandlerStateChange = event => {
        if (event.nativeEvent.oldState === State.ACTIVE) {
            _lastRotate += event.nativeEvent.rotation;
            _rotate.setOffset(_lastRotate);
            _rotate.setValue(0);
        }
    };

    const _onPanStateChange = event => {
        if (event.nativeEvent.oldState === State.ACTIVE) {
            _lastOffset.x += event.nativeEvent.translationX;
            _lastOffset.y += event.nativeEvent.translationY;
            _translateX.setOffset(_lastOffset.x);
            _translateX.setValue(0);
            _translateY.setOffset(_lastOffset.y);
            _translateY.setValue(0);
        }
    };

    const translateX = _translateX;
    const translateY = _translateY;
    const panStyle = {
        transform: [{ translateX }, { translateY }],
    };
    return (
        <PanGestureHandler
            ref={panRef}
            onGestureEvent={_onPanGestureEvent}
            onHandlerStateChange={_onPanStateChange}
        >
            <Animated.View>
                <RotationGestureHandler
                    ref={rotationRef}
                    onGestureEvent={_onRotateGestureEvent}
                    onHandlerStateChange={_onRotateHandlerStateChange}
                >
                    <Animated.View
                        style={[panStyle, styles.stickerContainer]}
                        collapsable={false}
                    >
                        <Animated.Image 
                            style={[
                                styles.pinchableImage,
                                {
                                    transform: [
                                        { perspective: 200 },
                                        { rotate: _rotateStr },
                                    ],
                                },
                            ]}
                            source={stageimage} 
                            resizeMode='contain' 
                        />
                    </Animated.View>
                </RotationGestureHandler>
            </Animated.View>
        </PanGestureHandler>
    );
}

export default StageGesture;

const styles = StyleSheet.create({
    stickerContainer: {
        position: 'absolute',
    },
    pinchableImage: {
        width: 150,
        height: 150,
    },
});

Any idea?

Package versions

• React: 17.0.1
• React Native: 0.63.3
• React Native Gesture Handler: 1.9.0