Firebase storage に関して複数の画像をアップしその画像のURLを取得するコードを完成させたい。

プログラムの流れとしては、
１、複数枚の画像をブラウザ経由でフォルダから選択
↓
２、Storageにアップロードし画像のURLを取得
↓
３、URLをfirestoreのドキュメントに保存

で一応作動するものを書きましたが、firebaseのドキュメントにある、
「listen for state changes, errors, completion」の部分をどう自分のコードに落とし込んだら
良いのかわかりません。

まず自分のコードは（特に上に書いた流れの２番の部分に注目して書いてます）

upload複数枚の画像を一括でアップロードし保存先のURLを取得
1function uploadImage(imageFiles, setProgress, postID, userID) {
2　//ファイルが空でないか
3    if (imageFiles !== null) {
4　　　//タイムスタンプをファイル名につける
5        let date = new Date();
6        let t = date.getTime();
7        let ts = Math.floor(t ); // timestamp
8        const nameOfFile = postID + String(ts);
9
10     //アップロードのプロミス集合体を作る
11      let promises = [];
12        promises = imageFiles.map((img, index) =>{
13            const imageRef = ref(storage, `${userID}/images/${nameOfFile + '-' + String(index)}`);
14            return uploadBytesResumable(imageRef, img)
15                .then((snapshot) => getDownloadURL(snapshot.ref))
16                .catch((error) => alert(error.code));
17        })
18　　　
19　　//実行して、終わったら取得したURLを配列としてドキュメントにセーブする
20        Promise.all(promises)
21        .then((mediaList) => {
22　　　　　　　//別に書いた関数を呼び出してfirestore のドキュメントにaddDocする
23            saveToDoc(mediaList, 'test1', postID);
24        }).catch((error) => alert(error.code)); 
25
26   　 }
27　}
28}

次にfirebaseの公式ドキュメントですが、単数アップロードのコードで、ここには上記コードまだ書けていない、.onでリッスンするアップロードの状態やエラーハンドルをするコードがあります。これを上記のコードに落とし込むにはどう記述すればいいのでしょうか？

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const storage = getStorage();

// Create the file metadata
/** @type {any} */
const metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
const storageRef = ref(storage, 'images/' + file.name);
const uploadTask = uploadBytesResumable(storageRef, file, metadata);
////////////////
// ※※※※※※※※※※※※※※※※※※※※※※※※※※※ここから※※※※※※※※
// Listen for state changes, errors, and completion of the upload.
uploadTask.on('state_changed',
  (snapshot) => {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        break;
      case 'running':
        console.log('Upload is running');
        break;
    }
  },
  (error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/unauthorized':
        // User doesn't have permission to access the object
        break;
      case 'storage/canceled':
        // User canceled the upload
        break;

      // ...

      case 'storage/unknown':
        // Unknown error occurred, inspect error.serverResponse
        break;
    }
////////////////
// ※※※※※※※※※※※※※※※※※※※※※※※ここまで※※※※※※※※※※※
  },
  () => {
    // Upload completed successfully, now we can get the download URL
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);