React Native - Animated.spring() isn't called as it should - react-native

Question

The output I want :
When I click on the card, it is flipped and it set isValidated to true. When I click a second time, is it flipped back to its original position.
I don't understand why I need to trigger onPressCard two times in order for the card to flip.
Console output are real strange too :
'rotationValue 0', when pressed 1 time
'rotationValue3 0 rotationValue 0' when pressed a second time
Here is the code :
interface RotativeCardProps {
card: RotativeCardType,
index: number
}
const Rotative = ({ card, index }: RotativeCardProps) => {
const [isValidated, setIsValidated] = useState<boolean>(false);
let rotationValue = 0;
const animatedValue = new Animated.Value(0);
animatedValue.addListener(({ value }) => { rotationValue = value; });
const onPressCard = () => {
if (!isValidated) { setIsValidated(true); }
flipCard();
};
const flipCard = () => {
console.log('rotationValue', rotationValue);
if (rotationValue > 89) {
console.log('rotationValue2', rotationValue);
Animated.spring(animatedValue, {
toValue: 0,
friction: 8,
tension: 10,
useNativeDriver: true,
}).start();
} else {
console.log('rotationValue3', rotationValue);
Animated.spring(animatedValue, {
toValue: 180,
friction: 8,
tension: 10,
useNativeDriver: true,
}).start();
}
};
const frontInterpolate = animatedValue.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'] });
const backInterpolate = animatedValue.interpolate({ inputRange: [0, 180], outputRange: ['180deg', '360deg'] });
const frontAnimatedStyle = { transform: [{ rotateY: frontInterpolate }] };
const backAnimatedStyle = { transform: [{ rotateY: backInterpolate }] };
```

Answer 1

flipCard();
calling this function onPressCard should be removed and moved to useEffect
useEffect(()=>{
flipCard();
},[isValidated])
this fill fix the issue as set state is blocking the animation