Как изменить порядок компонентов в карусели стека React Native?

Я пытаюсь встроить карусель стека в свое реагирующее приложение, используя React-Native-Reanimanted и обработчик жестов. Предполагается, что приложение отображает стопку компонентов друг над другом, и когда пользователь проводит пальцем вверх, компонент появляется и располагается поверх предыдущего компонента.

Вместо этого, когда я запускаю симулятор, когда пользователь проводит пальцем вверх, появившиеся компоненты располагаются позади предыдущего компонента, а не поверх него.

Это код компонента, который будет находиться внутри контейнера (думаю, проблема здесь):

import React from 'react';
import {SafeAreaView, View} from 'react-native-safe-area-context';
import Stack from '../Stack/Stack';
import Animated, {
  useAnimatedStyle,
  interpolate,
  withTiming,
} from 'react-native-reanimated';
import {
  FlingGestureHandler,
  Directions,
  State,
} from 'react-native-gesture-handler';
import {StyleSheet} from 'react-native';

const Card = ({
  item,
  index,
  animatedValue,
  currentIndex,
  prevIndex,
  datalength,
  maxVisibleItems,
}) => {
  const animatedStyle = useAnimatedStyle(() => {
    const translateY = interpolate(
      animatedValue.value,
      [index - 1, index, index + 1],
      [-10, 1, 10],
    );
    const translateY2 = interpolate(
      animatedValue.value,
      [index - 1, index, index + 1],
      [-200, 1, 200],
    );
    const scale = interpolate(
      animatedValue.value,
      [index - 1, index, index + 1],
      [0.9, 1, 1.1],
    );
    const opacity = interpolate(
      animatedValue.value,
      [index - 1, index, index + 1],
      [1, 1, 0],
    );

    return {
      transform: [
        {
          translateY: index === prevIndex.value ? translateY2 : translateY,
        },
        {scale},
      ],
      opacity:
        index < currentIndex.value + maxVisibleItems - 1
          ? opacity
          : index === currentIndex.value + maxVisibleItems - 1
          ? withTiming(1)
          : withTiming(0),
    };
  });

  return (
    <FlingGestureHandler
      key = "up"
      direction = {Directions.UP}
      onHandlerStateChange = {ev => {
        if (ev.nativeEvent.state === State.END) {
          if (currentIndex.value !== 0) {
            animatedValue.value = withTiming((currentIndex.value -= 1));
            prevIndex.value = currentIndex.value - 1;
          }
        }
      }}>
      <FlingGestureHandler
        key = "down"
        direction = {Directions.DOWN}
        onHandlerStateChange = {ev => {
          if (ev.nativeEvent.state === State.END) {
            if (currentIndex.value !== datalength - 1) {
              animatedValue.value = withTiming((currentIndex.value += 1));
              prevIndex.value = currentIndex.value;
            }
          }
        }}>
        <Animated.View style = {animatedStyle}>
          <Stack
            title = {item.title}
            title1 = {item.title1}
            style = {{zIndex: datalength - index}}
          />
        </Animated.View>
      </FlingGestureHandler>
    </FlingGestureHandler>
  );
};

export default Card;

const styles = StyleSheet.create({
  image: {
    position: 'absolute',
    borderRadius: 20,
  },
});

также код контейнера:

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import Stack from '../Stack/Stack';
import {useSharedValue} from 'react-native-reanimated';
import Card from '../Card/Card';

const CardContainer = ({data, maxVisibleItems}) => {
  const animatedValue = useSharedValue(0);
  const currentIndex = useSharedValue(0);
  const prevIndex = useSharedValue(0);
  return (
    <>
      {data.map((item, index) => {
        return (
            // or Stack 
          <Card
            maxVisibleItems = {maxVisibleItems}
            key = {index}
            item = {item}
            index = {index}
            animatedValue = {animatedValue}
            currentIndex = {currentIndex}
            prevIndex = {prevIndex}
            datalength = {data.length}
          />
        );
      })}
    </>
  );
};

export default CardContainer;

Я пробовал поиграться с некоторыми значениями в TranslateY и TranslateY2, но безуспешно, как и с индексами.