Данные, записанные из FlatList, пусты при первом нажатии TouchableOpacity

Краткое изложение проблемы

Внутри моего Flatlist я хочу сохранить значение строки, на которую щелкнул пользователь, в массиве.

Каждая строка моего FlatList активна с помощью TouchableOpaicty.

Что я пробовал

Я искал в Интернете, но не нашел ответа, и я пытался сохранить данные в массив разными способами.

Код

Плоский список

    <FlatList
                        data = {this.state.friends}
                        renderItem = {({item}) => {
                            console.info('item', item);
                            return( 
                                <TouchableOpacity
                                onPress = {() => this.add(item.key)}
                            >
                                <ImageBackground
                                    style = {styles.friendBubble}
                                    source = {require('../../assets/images/friendDisplay.png')}
                                >
                                    <Text style = {styles.friendText}>{item.key}</Text>
                                </ImageBackground>
                            </TouchableOpacity>
                            )
                        }}
                    />

Функция TouchableOpacity onPress

add = (item) => {
        this.setState(
            {friendsInComp: [...this.state.friends, item]}, 
            console.info('this.state.friend', this.state.friendsInComp)
        )
    }

Ожидаемые результаты

Каждый раз, когда я щелкаю по строке, значение этой строки должно добавляться в конец массива.

Фактические результаты

При первом щелчке по строке в массив не добавляется никакого значения. При каждом последующем щелчке строки значение предыдущего щелчка добавляется в конец массива.