React Native: Flip card animation doesn't work in functional component

I am new to React Native. I tried to create flip card animation and I was following a tutorial, and created the animation but it shows only one side of the card when the animation ends. I think the problem comes from my style but couldn't figure out how to fix this.

My current code is this.

const CardFlip = ({ navigation, route }: Props) => {  const animatedValue = new Animated.Value(0);  const [val, setVal] = useState(0);  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 }    ]  };  useEffect(() => {    animatedValue.addListener(({ value }) => {      setVal(value);    });  });  const flipCard = (): void => {    Animated.spring(animatedValue, {      toValue: val >= 90 ? 0 : 180,      friction: 8,      tension: 10,      useNativeDriver: true,    }).start();  };  return (<View style={styles.screen}><View style={styles.cardWrapper}><Animated.View style={[styles.card, frontAnimatedStyle]}><Text style={styles.text}>            Front</Text></Animated.View><Animated.View style={[styles.cardBack, backAnimatedStyle]}><Text style={styles.text}>            Back</Text></Animated.View>             </View><View style={styles.buttonWrapper}><TouchableOpacity          style={styles.flipCardButton}><Icon             name="visibility"            type="material"            color="#FFFFFF"            size={30}            onPress={() => flipCard()}          /></TouchableOpacity></View></View>  );};const styles = StyleSheet.create({  screen: {    height: '100%',    width: '100%',    top: 0,    left: 0,    backgroundColor: '#F7F3EC',  },  cardWrapper: {    alignItems: 'center',  },  card: {    position: 'absolute',    height: 480,    width: 320,    top: 40,    paddingTop: 45,    paddingHorizontal: 25,    backgroundColor: '#F9D6E2',    borderRadius: 7,    borderWidth: 0,    elevation: 6,    backfaceVisibility: 'hidden',  },  cardBack: {    position: 'absolute',    height: 480,    width: 320,    top: 40,    paddingTop: 45,    paddingHorizontal: 25,    backgroundColor: '#F9D6E2',    borderRadius: 7,    borderWidth: 0,    elevation: 6,    backfaceVisibility: 'hidden',  },  text: {    fontSize: 24,  },  buttonWrapper: {    position: 'absolute',    alignItems: 'center',    width: '100%',    height: 60,    bottom: 0,  },  flipCardButton: {    alignItems: 'center',    justifyContent: 'center',    height: 60,    width: 60,    position: 'absolute',    bottom: 10,    borderRadius: 100,    borderWidth: 0,    elevation: 6,    backgroundColor: '#EF5350',  }});

And the animation is like this.

How can I fix this?