Estoy usando una lista plana para mostrar las notas de entrada del usuario en mi aplicación. Pero Flat List no representa ningún elemento que ingresé. Usé una lista estática para probar y funciona correctamente. pero cuando ingreso un texto a través de la entrada de texto, no se muestra.

 const addToDoHandler = () => { if(userInput == ''){ return; } const newTodo = { id: Math.floor(Math.random() * 1000), text: userInput, completed: false, }; const newTodos = [...todos, newTodo]; setTodos(newTodos); //clear user input setUserInput(''); }; const renderItem = ( {item} ) => { <View style={{backgroundColor:'#6b4d87', marginVertical: 10, flexDirection:'row', alignItems:'center', justifyContent:'space-between', height:60, width:'95%', borderRadius:10 }}> <View> <Text style={{color:'black', fontSize:20, fontWeight:'bold'}}>{item.text}</Text> </View> <TouchableOpacity onPress={() => deleteHandler(item.id)}> <TrashIcon size={35} name="trash" style={{color:'#eff9f0'}} /> </TouchableOpacity> </View> }; return ( <SafeAreaView style={styles.root}> <View style={styles.txtInputView}> <TextInput value={userInput} onChangeText={text => setUserInput(text)} style={styles.textInput} placeholder={"Enter Your Note..."} /> <TouchableOpacity style={styles.addButton} onPress={addToDoHandler}> <PlusSign size={35} name="add-sharp" style={styles.plusIcon}/> </TouchableOpacity> </View> <View style={{alignItems:'center'}}> <FlatList data={todos} renderItem={renderItem} keyExtractor={item => item.id} /> </View> </SafeAreaView> );