обновить экземпляр setState в React Native

Question

Я пытаюсь получить изображения, хранящиеся в хранилище firebase, и отобразить их в собственном приложении React. функции работают для получения URL-адреса загрузки изображений, но не объединяют предыдущее состояние и компонент обновления, а просто отображаются только в одном изображении (из-за useState). так как каждое изображение извлекается, оно отображает изображение в том же компоненте изображения вместо создания нового компонента для отображения в

Код:

import React, {setState, useState} from 'react';
import {DrawerActions, useNavigation} from '@react-navigation/native';

const Gallery = () => {
  const navigation = useNavigation();
  const [downloadUrl, setDownloadUrl] = useState({url: undefined});
  console.log(`URL should be undefined at this point ${downloadUrl}`);

  function listFilesAndDirectories(reference, pageToken) {
    return reference.list({pageToken}).then(result => {
      result.items.forEach(ref => {
        ref.getDownloadURL().then(url => {
          // console.log(`Image URL is:\n ${url}`);
          setDownloadUrl({url: url});
        });
      });

      if (result.nextPageToken) {
        return listFilesAndDirectories(reference, result.nextPageToken);
      }

      return Promise.resolve();
    });
  }

  const storageReference = firebase
    .storage()
    .refFromURL('gs://ab404.appspot.com/images');

  listFilesAndDirectories(storageReference).then(() => {
    console.log('Started listing image download urls');
  });

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={SharedStyles.header}>
          <TouchableOpacity
            onPress={() => {
              navigation.dispatch(DrawerActions.openDrawer());
            }}>
            <Hamburg />
          </TouchableOpacity>
          <Header title="Gallery" />
        </View>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <View style={styles.container}>
            <View style={styles.sectionContainer}>
              <View>
                <Text>
                  Welcome to the Abulad Gallery! Come back for more content....
                </Text>
                <Image
                  source={{uri: downloadUrl.url}}
                  style={styles.fetchedImage}
                />
              </View>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

Я попытался использовать оператор распространения, чтобы получить предыдущее состояние и обновление по мере необходимости, но я получаю invalid attempt to spread a non-iterable instance

Мне нужен способ, чтобы изображения появлялись в их компоненте при обновлении URL-адреса. Спасибо