How to use dropdown picker inside every FlatList item in react native?

Question

I am using this library to show drop down picker option. It's working fine when i am using it without FlatList (Screenshots attached)

But when i am using it inside FlatList view, picker's children view is going behind next FlatList row's view (Screenshots attached)

I have also tried to use zIndex in Desc order for picker.

It's been a very long time I am with this problem and didn't get anything to make things happen.

How things can get solved? Any other way to show dropdown children in UI and it's selectable?

FlatList child content

Render code for each FlastList child is geven below,

<View >
                <Card style={{ elevation: 10, margin: 7 }}>

                     <Card.Content style={{ backgroundColor: '#B5DBF7' }}>
                          <View style={{ marginTop: 3, }}>

                               <View style={{ paddingLeft: 10 }}>
                                    <Text style={{ color: CONSTANTS.COLOR.BASE_COLOR, fontSize: 18, fontWeight: 'bold' }}>{item.text}</Text>
                                    <View style={{ marginTop: 10, width: '100%', height: 1.5, backgroundColor: CONSTANTS.COLOR.BASE_COLOR }}></View>
                                    <Text style={{ fontSize: 14, marginTop: 3 }}>This will be descriptive text for notification of the user. Dummy data is being showing now.</Text>


                               </View>

                               <DropDownPicker
                                    items={[
                                         { label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true },
                                         { label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" /> },
                                         { label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" /> },
                                    ]}
                                    // defaultValue={this.state.country}
                                    containerStyle={{ height: 40 }}
                                    childrenContainerStyle={{
                                         height: 1030
                                     }}
                                    style={{ backgroundColor: '#fafafa', zIndex: index_value - index, position: 'relative'}}
                                    itemStyle={{
                                         justifyContent: 'flex-start'
                                    }}
                                    dropDownStyle={{ backgroundColor: '#fafafa', height: 100, }}
                                    onChangeItem={item => this.setState({
                                         country: item.value
                                    })}
                               />
                          </View>
                          
                     </Card.Content>
                </Card>
           </View>