Recibo este error cuando uso Flatlist

Violación invariable no detectada: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.

¿Cómo puedo resolver esto? No creo que haya algún error de importación o exportación aquí.

 import * as React from 'react'; import { View, Text, SafeAreaView, StyleSheet, FlatList } from 'react-native'; const DATA = [ { id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', title: 'First Item', }, { id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', title: 'Second Item', }, { id: '58694a0f-3da1-471f-bd96-145571e29d72', title: 'Third Item', }, ]; function Item({ title }) { return ( <View style={styles.item}> <Text style={styles.title}>{title}</Text> </View> ); } export default class Abc extends React.Component<{}, {}> { console.log("RENDER RENDER"); render(): React.ReactNode { return ( <SafeAreaView style={styles.container}> <FlatList data={DATA} renderItem={({ item }) => <Item title={item.title} />} keyExtractor={item => item.id} /> </SafeAreaView> ) } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 10, }, item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, });