احاول ان اعمل fetch ل api بسيط جدا باستخادم fetch وليس axios

السلام عليكم .. لطالما اعتدت ان اتعامل مع اى apis باستخدام axios ولكنى احببت ان اجرب fetch .. 

قمت فعمليه ناجحة باستخدام then, catch ولكن عندما اردت استخدام  async await فانا اجد صعوبة هنا ..  استطيع طباعة الداتا فى الكونسول ولكن لا تظهر فى ال flatlist ما السبب

import React, {useEffect, useState} from 'react';
import {Button, FlatList, Text, View} from 'react-native';

function GetData() {
  const [data, setData] = useState([]);
  const getFetchThen = () => {
    fetch(
      'https://reactnative.dev/movies.json',
    )
      .then(response => response.json())
      .then(json => setData(json))
      .then(console.log(data))
      .catch(error => console.error(error));
  };

  // Async
  const getFetchAsync = async () => {
    try {
      let response = await fetch(
        'https://reactnative.dev/movies.json',
      );
      let json = await response.json();
      console.log(json);
      return json;
    } catch (error) {
      console.error(error);
    }
  };

  const asyncData = getFetchAsync();

  useEffect(() => {
    getFetchThen();
    getFetchAsync();
  }, []);

  return (
    <View style={{flex: 1, padding: 24}}>
      <View>
        <Button title="Get" onPress={getFetchThen} />
        <Button title="test" onPress={() => console.log(asyncData)} />
        <Button title="Get Fetch Async" onPress={getFetchAsync} />
        <FlatList
          data={asyncData}
          // data={data}
          keyExtractor={item => item.id.toString()}
          renderItem={({item}) => (
            <Text>
              {item.title}, {item.price}
            </Text>
          )}
        />
      </View>
    </View>
  );
}

export default GetData;