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

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>
    );
};