Flatlist with Absolute position is hidden behind other elements, even with zIndex

Question

I want to have my FlatList component of data results to be ontop, as if an Autocomplete feature. However, no matter what I try, sibling components to the parent of the FlatList stay on top:

// Component with Autocomplete:
<Card containerStyle={{ marginHorizontal: 0 }}>
      <Typography>Location</Typography>
      <View>
        <SearchBar
          autoCapitalize={'none'}
          autoComplete={undefined}
          autoCorrect={false}
          clearIcon={
            <Pressable hitSlop={20} onPress={() => setText('')}>
              <Feather
                // color={theme.colors.main.default}
                name="x"
                size={18}
              />
            </Pressable>
          }
          // containerStyle={styles.containerStyle}
          // inputContainerStyle={styles.inputContainerStyle}
          // inputStyle={styles.inputStyle}
          onChangeText={val => setText(val)}
          placeholder="Search for name, such as: Blue River"
          // placeholderTextColor={theme.colors.text.secondary}
          returnKeyType="done"
          value={text}
        />
        <FlatList
          contentContainerStyle={{
            backgroundColor: 'white',
            zIndex: 50000000 // does not change with or without this
          }}
          data={results?.predictions}
          renderItem={({ item }) => (
            <View>
              <Typography>{item.description}</Typography>
            </View>
          )}
          style={{ position: 'absolute', marginTop: 40, zIndex: 50000000 }} // 
        />
      </View>
</Card>

and the parent code:

// parent of all
<ScrollView>
       <Location /> // autocomplete
        <Card containerStyle={{ marginHorizontal: 0 }}> // card is ontop of results
          <Typography>Pattern</Typography>
        </Card>
</ScrollView>