问如何使用AsyncStorage将一条记录存储到现有数组中

EN

// Array myItems, where i'd like to store the data
const [myItems, setMyItems] = useState([]); 

// Array of data from api
const [itemsFromApi, setItemsFromApi] = useState([]); 

// Fetch items from API and render it as a Flatlist, works good
const getItems = async () => {
   const response = await api.get('/...');
   setItemsFromApi(response.data)
};

<FlatList 
    data={itemsFromApi}
    keyExtractor = { (item, index) => index.toString() }
    renderItem={({ item })=>{
           return (
             <TouchableOpacity>
                 <Text>{item.id}</Text>
                 <Text>{item.title}</Text>
                 <Button title="Add" onPress={()=>{addItem(item))} />
            </TouchableOpacity>
       )
   }}
 />

// Save fetched items to array myItems
const addItem = (item) => {
   setMyItems([...myItems, item]);
   storeData();
};


// trying to store array myItems using AsyncStorage
 const storeData = async (myItems) => {
        try {
          await AsyncStorage.setItem('STORAGE_KEY', JSON.stringify(myItems));
          Alert.alert('Saved', 'Successful');
        } catch (error) {
            Alert.alert('Error', 'There was an error.')
        }
      };

// trying to retrieve data 
const retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('STORAGE_KEY');
      if (value !== null) {
            console.log(JSON.parse(value))
        }
      } catch (error) {
            console.log(error)
      }
        return null;
  };