FlatList render item absolute position

Question

I have a list of chat messages (using React Native Gifted Chat, similar to using a FlatList), and I'm using an absolute view (let's call it view1) for each renderItem within it. I need view1 to be displayed above all other items. Currently, it appears as absolute to the current renderItem, but it's positioned behind the rest of the items in the list.

const RenderBubble = ({props}) => {
const showAvatar = Object.keys(props.nextMessage).length === 0;
return (
  <View>
    <TouchableOpacity
      onPress={() => {
        setSelectedMessage(props.currentMessage._id);
      }}
      style={{backgroundColor: '#B9CCE5',
      borderColor: 'green',
      borderBottomRightRadius: 30,
      borderTopRightRadius: 30,
      borderTopLeftRadius: showAvatar ? 5 : 15,
      borderBottomLeftRadius: showAvatar ? 5 : 0,
      position:'relative',
      zIndex:-1,
      padding: 10}}>
      <Text>{props.currentMessage.text}</Text>
      {/* <Text>
        {props.currentMessage.reaction}
      </Text> */}


      {selectedMessage != null &&
        selectedMessage == props.currentMessage._id && (
          <View
            style={{
              flexDirection: 'row',
              position: 'absolute',
              top: -10,
              left: 8,
              zIndex: 40,
              backgroundColor: 'white',
              padding: 5,
            }}>
            {ReactionItems.map(Item => {
              return (
                <TouchableOpacity
                  key={Math.random().toString()}
                  onPress={() => {
                    updateMessages(props.currentMessage._id, Item.emoji);
                    setSelectedMessage(null);
                  }}>
                  <Text style={{marginHorizontal: 2}}>{Item.emoji}</Text>
                </TouchableOpacity>
              );
            })}
          </View>
        )}
    </TouchableOpacity>
  </View>
);

};

Screen shot is given below