React native - Animated view default position

Question

im trying to understand why does setting toValue x and y to 0 return the view to its initial position using Animated.spring, but when i save the view x and y coords using onLayout it add those coordinates as margin. here is my exemple:

import React, {useRef} from 'react';
import {View, Text, PanResponder, Animated} from 'react-native';
const Cards: React.FC<{}> = (): JSX.Element => {
    const translate = useRef(new Animated.ValueXY()).current;
    const cords = useRef<{viewX: number; viewY: number}>({
        viewX: 0,
        viewY: 0,
    }).current;
    const panResponder = useRef(
        PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
            onPanResponderMove: (evt, gestureState) => {
                Animated.event([null, {dx: translate.x, dy: translate.y}], {
                    useNativeDriver: false,
                })(evt, gestureState);
            },
            onPanResponderRelease: (evt, gestureState) => {
                
                Animated.spring(translate, {
                    toValue: {x: cords.viewX, y: cords.viewY},
                    speed: 200,
                    useNativeDriver: true,
                }).start();
            },
        }),
    ).current;
    return (
        <View style={{flex: 1}}>
            <Animated.View
                {...panResponder.panHandlers}
                onLayout={event => {
                    cords.viewX = event.nativeEvent.layout.x;
                    cords.viewY = event.nativeEvent.layout.y;
                }}
                style={{
                    backgroundColor: 'red',
                    width: 200,
                    height: 200,
                    margin: 40,
                    transform: [
                        {
                            translateX: translate.x,
                        },
                        {translateY: translate.y},
                    ],
                }}></Animated.View>
            <Text style={{position: 'absolute', marginLeft: 40}}>
                im a text
            </Text>
        </View>
    );
};

export default Cards;

if i change the animated.spring to

Animated.spring(translate, {
                    toValue: {x: 0, y: 0},
                    speed: 200,
                    useNativeDriver: true,
                }).start();

it works perfectly, why is that ? isn't viewX, viewY supposed to be the default cords for my view ?