firebase storageの複数画像アップロード機能を作成したい【react-native】

Question

前提

react-native（expo）でInstagramのような画像投稿できる機能を作っております。
firebase strageに画像を保存する機能を作成したのですが、複数枚画像をアップロードすることができませんでした。
画像を複数アップロードするにはどのようにすれば良いでしょうか。
また、アップロード後の画像パスを取得してfirestoreにドキュメントを登録する処理も加えています。
よろしくお願いいたします。

発生している問題・エラーメッセージ

画像の配列をループで処理したが、画像の1枚目しかアップロードされず、当然firestoreにもドキュメントは作成されませんでした。

該当のソースコード

アップロード機能

  export const uploadImage = async (uri: string, path: string) => {
    // uriをblobに変換
    const localUri = await fetch(uri);
    const blob = await localUri.blob();
    // storageにupload
    const storage = getStorage();
    const strageRef = ref(storage, path);

    let downloadUrl = "";
    try {
      await uploadBytesResumable(strageRef, blob);
      downloadUrl = await getDownloadURL(strageRef);
    } catch (err) {
      console.log(err);
    }
    return downloadUrl;
  };

投稿ページ

import React, { useEffect, useState, useContext } from "react";
import { StyleSheet, SafeAreaView, View, Image, Alert, FlatList } from "react-native";
import { setDoc } from 'firebase/firestore';

import { createPostRef, uploadImage } from "../lib/firebase";
import { MultiplePickImage} from "../lib/multiple-image-picker";
import { UserContext } from "../contexts/userContext";
import { ReviewsContext } from "../contexts/reviewsContext";
import { getExtention } from "../utils/file";

import { IconButton } from "../components/IconButton";
import { TextArea } from "../components/TextArea"
import { StarInput } from "../components/StarInput"
import { Button } from "../components/Button"
import { Loading } from "../components/Loading"

import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RootStackParamList } from "../types/navigation"; 
import { RouteProp } from "@react-navigation/native";
import { serverTimestamp } from "firebase/firestore";
import { Post } from "../types/post";

type Props = {
    navigation: NativeStackNavigationProp<RootStackParamList, "CreatePost">;
    route: RouteProp<RootStackParamList, "CreatePost">;
};

export const CreatePostScreen: React.FC<Props> = ({
    navigation,
    route,
}: Props) => {
    const { post } = route.params;
    const [text, setText] = useState<string>("");
    const [imgUrls, setImgUrls] = useState([]);
    const [loading, setLoading] = useState<boolean>(false);
    const { user } = useContext(UserContext);
   
    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => (
                <IconButton name="x" onPress={() => navigation.goBack()} />
            ),
        });
    }, [post]);

    const onSubmit = async () => {
        if(!text || !imgUrls) {
            Alert.alert("レビューまたは画像がありません");
            return;
        };

        setLoading(true);
        let imgs = [];
        //documentのIDを取得
        const postDocRef = await createPostRef();
        imgUrls.map((img) => {
        //storageのpathを決定
        const ext = getExtention(img.uri);
        const storagePath = `post/${postDocRef.id}/${postDocRef.id}.${ext}`;
        //画像をstorageにアップロード
        const downloadUrl = uploadImage(img.uri, storagePath);
        imgs.push(downloadUrl);
        })
        //postドキュメントを作成
        const post = {
            id: postDocRef.id,
            user: {
                name: user?.name,
                id: user?.id,
                imgUrl: user?.imgUrl
            },
            text,
            imgUrl: imgs,
            updateAt: serverTimestamp(),
            createdAt: serverTimestamp(),
        } as Post;
        await setDoc(postDocRef,post);
        
        setLoading(false);
        navigation.goBack();
    };

    const onPickImage = async () => {
        const images = await MultiplePickImage();
        setImgUrls(images);
    };
    return(
        <SafeAreaView style={styles.container}>
            <StarInput score={score} onChangeScore={(value) => setScore(value)} />
            <TextArea value={text} onChangeText={(value) => setText(value)} label="" placeholder="キャプションを書く" />
            <View style={styles.photoContainer}>
            <IconButton name="camera" onPress={onPickImage} color="#ccc" />
            {!!imgUrls  && 
            <FlatList
                    data={imgUrls}
                    keyExtractor={(item, index) => index.toString()}
                    numColumns={2}

                    renderItem={({ item }) => (
                        <View>
                            <Image
                                source={{ uri: item.uri }}
                                style={styles.image}
                            />
                        </View>
                    )}
             />}
            </View>
            <Button text="投稿する" onPress={onSubmit} />
            <Loading visible={loading} />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
    },
    photoContainer: {
        margin: 8
    },
    image: {
        width: 100,
        height: 100,
        margin: 8
    }
});

補足情報（FW/ツールのバージョンなど）

firebase: 9.9.2
expo: 46.0.0

Answer 1

自己解決しました。
ループで1件ずつアップロードを実行し、Promise.allで正常に終わるのを待ちました。
返り値が配列で返ってくるので、その値をimgUrlに使用することでfirestoreにファイルURLを配列で登録することができました。

const result = await Promise.all(imageUrls.map(async(img, index) => {
            //storageのpathを決定
            const ext = getExtention(img.uri);
            const storagePath = `reviews/${reviewDocRef.id}/${reviewDocRef.id}-${index}.${ext}`;
            //画像をstorageにアップロード
            const downloadUrl = await uploadImage(img.uri, storagePath);
            return downloadUrl;
        }))
        console.log(result);