Не могу повторно использовать мой компонент, он отображается только 1 раз

По какой-то причине, когда я вызываю свой компонент TouchSelect во второй раз, он не отображается, поэтому я не могу его повторно использовать. Я повторно использовал компоненты много раз до этого, поэтому я действительно озадачен этим. Кажется, проблема связана с FlatList, потому что, если я сделаю то же самое, но с функцией карты, все будет работать отлично, и я смогу без проблем повторно использовать свой компонент.

Я также заметил, что если я вставляю текст под компонентом TouchSelect, я его не вижу, если я помещаю свой текст перед компонентом, я вижу его без проблем. Вот это репозиторий: https://github.com/Themrpie/surveyapp

export default function App() {

  

  return (
    <SafeAreaView style = {styles.container}>
      <RadioSelect />
      <ChipSelect/>
      <Stars/>      
      <TouchSelect question='How likely are you to recommend our company?' />
      <TouchSelect question='THIS DOESNT SHOW' />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    
    
  },
  texto: {
    justifyContent:'center'
  }
});

На всякий случай я также публикую полный компонент кода:

import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useState } from 'react'
import { MD2Colors, Surface } from 'react-native-paper'

const options = [
    {
        id: 1,
        option: 1
    },
    {
        id: 2,
        option: 2
    },
    {
        id: 3,
        option: 3
    },
    {
        id: 4,
        option: 4
    },
    {
        id: 5,
        option: 5
    },
    {
        id: 6,
        option: 6
    },
    {
        id: 7,
        option: 7
    }, 
    {
        id: 8,
        option: 8
    },
    {
        id: 9,
        option: 9
    },
    {
        id: 10,
        option: 10
    },
    
   
]

const TouchSelect = ({question}) => {
    const [selected, setSelected] = useState()

  return (
      <Surface style = {styles.container}>    
        <Text style = {styles.question} >{question}</Text>      
         <FlatList data = {options} keyExtractor = {(item) => item.id} horizontal
            renderItem = {({item}) =>(
                <TouchableOpacity style = { selected === item.id? [{...styles.option}, {backgroundColor:MD2Colors.lightGreen600}]: styles.option} 
                    onPress = {() => setSelected(item.id)}  >
                    <Text style = {styles.texto} >{item.option}</Text>
                </TouchableOpacity> )
            }
            />       
     </Surface>
  )
}

export default TouchSelect

const styles = StyleSheet.create({
    container: {
        marginVertical: 20,
        backgroundColor:'white',
        alignItems:'center'

    },
    option: {
        marginHorizontal:2,
        backgroundColor: MD2Colors.amberA200,
        padding: 8,        
        borderRadius: 100,        
        
    },
    question: {
        fontSize: 20,
        fontWeight: 'bold',
        marginBottom: 15,
        textAlign: 'center',
        
    },
    texto: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign:'center',
        
        
        
    }

})

Если кто-нибудь может помочь мне с этой проблемой, я был бы очень признателен.