card flip animation flip and then content flickers to visible in Android - reactjs

Question

I have a card flip animation on my application. The card functions as a timer. The content should be visible straight away but there is a flicker when render contents.
I use React-native-reanimated v2.0.1(ya, it's so outdated..)
Does anyone know why the number inside the card flickers?
Here is my code.
import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated';
import type FlipCardProps from './FlipCardProps';
const styles = StyleSheet.create({
container: {
height: 32,
width: 24,
},
animatedCard: {
alignItems: 'center',
backfaceVisibility: 'hidden',
justifyContent: 'center',
position: 'absolute',
},
});
const PERSPECTIVE = 100;
const Z_INDEX_CHANGE_ANGLE = 90;
export default function FlipCard(props: FlipCardProps) {
const {
backCard,
frontCard,
reanimationKey,
style,
} = props;
const sharedAngle = Animated.useSharedValue(0);
const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {
return {
zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
transform: [
{ perspective: PERSPECTIVE },
{ rotateX: `${sharedAngle.value}deg` },
],
};
});
const animatedBackCardStyle = Animated.useAnimatedStyle(() => {
return {
zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
transform: [
{ perspective: PERSPECTIVE },
{ rotateX: `${(sharedAngle.value + 180)}deg` },
],
};
});
useEffect(() => {
sharedAngle.value = 0;
sharedAngle.value = Animated.withTiming(180, { duration: 500 });
}, [reanimationKey]);
return (
<View style={[styles.container, style]}>
<Animated.View style={[styles.animatedCard, animatedFrontCardStyle]}>
{frontCard}
</Animated.View>
<Animated.View style={[styles.animatedCard, animatedBackCardStyle]}>
{backCard}
</Animated.View>
</View>
);
};