Reactjs 无法重用我的组件，它只显示 1 次

由于某些原因，当我第二次调用我的组件TouchSelect时，它没有显示，所以我不能重用它.我已经重用了组件 很多次了，所以我真的对此感到困惑. 这个问题似乎与FlatList有关，因为如果我做同样的事情，但使用map函数，一切都会完美地工作，我可以重用我的组件而不会有任何问题.

我还注意到，如果我在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',
        
        
        
    }

})

如果有人能帮我解决这个问题，我将不胜感激.