React Native items are not layered properly with FlatList - react-native

Question

I'm trying to use FlatList to stack custom-made dropdown menus on top of each other in React Native. I want the first dropdown to overlap the second while the second overlaps the third. The image below shows that the opposite is working, where the third dropdown overlaps the second while the second overlaps the first.
However, if I use the map method, it seems to work just fine.
import React from "react";
import { View, StyleSheet, FlatList } from "react-native";
import Dropdown from "../components/Dropdown";
import normalize from "react-native-normalize";
export default () => {
const arr = [0, 65, 130]; // controls the margin between the dropdowns // top
const layers = [3, 2, 1]; // Z-index
return (
<View style={styles.container}>
<FlatList // With FlatList
data={arr}
renderItem={({ item, index }) => (
<View style={[styles.dropdown, { top: item, zIndex: layers[index] }]}>
<Dropdown />
</View>
)}
/>
{/* {arr.map((spacing, index) => {
// With map
return (
<View
style={[styles.dropdown, { top: spacing, zIndex: layers[index] }]}
>
<Dropdown />
</View>
);
})} */}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
dropdown: {
position: "absolute",
},
cardContainer: {
top: "41%",
left: "37%",
height: normalize(134),
},
});
Dropdown code
import React, { useState, useRef } from "react";
import {
Animated,
Easing,
View,
Text,
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
import normalize from "react-native-normalize";
import DropDownIcon from "../assets/DownArrowIcon";
export default () => {
const fadeAnim = useRef(new Animated.Value(0)).current;
const [toggle, setToggle] = useState(true); // controls the dropdown animation
const [accessLevels, setAccessLevels] = useState([
"Manager",
"Viewer",
"Admin",
]);
const height = normalize(33); // Initial height of the dropdown menu
const fadeIn = () => {
// Will change fadeAnim value to .5 in
Animated.timing(fadeAnim, {
toValue: 0.5,
easing: Easing.inOut(Easing.exp),
duration: 325,
}).start();
};
const fadeOut = () => {
// Will change fadeAnim value to 0
Animated.timing(fadeAnim, {
toValue: 0,
easing: Easing.inOut(Easing.exp),
duration: 250,
}).start();
};
const handleAnimation = () => {
setToggle((prev) => !prev);
toggle ? fadeIn() : fadeOut();
};
const handleSwap = (item) => {
// swap the selected item with the first item of the dropdown menu
let index = accessLevels.indexOf(item);
setAccessLevels((prevData) => {
let data = [...prevData];
let temp = data[0];
data[0] = item;
data[index] = temp;
return data; // We could order this in alphabetical order!
});
};
return (
<Animated.View
style={[
styles.dropdown,
{
height: fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: [height, normalize(125)],
}),
},
]}
>
<TouchableWithoutFeedback onPress={handleAnimation}>
{/*First dropdown item*/}
<View
style={{
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
height: normalize(34),
// color is based on the type of access level for the first dropdown item
backgroundColor:
accessLevels[0] === "Manager"
? "#019385"
: accessLevels[0] === "Viewer"
? "#376EC5"
: "#DECB52",
}}
>
<Text style={styles.dropdownText}>{accessLevels[0]}</Text>
<Animated.View // animation for the dropdown icon
style={{
transform: [
{
rotateX: fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
}),
},
],
}}
>
<DropDownIcon />
</Animated.View>
</View>
</TouchableWithoutFeedback>
<View // bottom two dropdown items
style={{
justifyContent: "space-evenly",
alignItems: "center",
minHeight: normalize(46),
flex: 1,
}}
>
<TouchableWithoutFeedback // second dropdown item
onPress={() => {
handleAnimation();
handleSwap(accessLevels[1]);
}}
>
<View style={styles.dropdownBottomItems}>
<Text style={{ color: "white" }}>{accessLevels[1]}</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback // third dropdown item
onPress={() => {
handleAnimation();
handleSwap(accessLevels[2]);
}}
>
<View style={styles.dropdownBottomItems}>
<Text style={{ color: "white" }}>{accessLevels[2]}</Text>
</View>
</TouchableWithoutFeedback>
</View>
</Animated.View>
);
};
const styles = StyleSheet.create({
dropdown: {
backgroundColor: "#4E585E",
width: normalize(97),
borderRadius: 4,
overflow: "hidden",
},
dropdownText: {
color: "white",
},
dropdownBottomItems: {
width: "100%",
justifyContent: "center",
alignItems: "center",
height: normalize(24),
},
});