FlatList не показывает результат API

Я просто тренируюсь потреблять апис в react-native с useEffects и в console.info() возвращает результаты, но в представлении не показывает, думаю дело в keyExtractor или нет...

const api = 'https://randomuser.me/api/?&results=2';

const Detalhes = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setIsLoading(true);

    fetch(api)
      .then((response) => response.json())
      .then((results) => {
        setData(results);
        setIsLoading(false);
        console.info(results);
      })
      .catch((err) => {
        setIsLoading(false);
        setError(err);
      });
  }, []);

  if (isLoading) {
    return (
      <View style = {{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <ActivityIndicator size = "large" color = "#5500dc" />
      </View>
    );
  }
  
  if (error) {
    return (
      <View style = {{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text style = {{fontSize: 18}}>
          Error...
        </Text>
      </View>
    );
  }

и это код с FlatList, который должен быть возвращен в представлении, и, как сказано, я вижу результат в console.info (реагировать на нативную отладку)

<SafeAreaView>
    <FlatList
        data = {data}
        keyExtractor = {item => item.first}
        renderItem = {({item}) => (
         <View style = {styles.metaInfo}>
           <Text style = {styles.text}>
             {`${item.name.first} ${item.name.last}`}
           </Text>
         </View>
        )}
     />
 </SafeAreaView>