Update same state variable with multiple async function?

I have a function that stores videos in firebase storage. In the function, I have a snapshot listener that listens to the upload progress and calls another function, "UploadingProgress" to update a state variable that holds the "percentage". This is the function below:

feedUploadProgress: async (Data, UploadingProgress, mediaIndex) => {
    try {
      let url = null;
      var uploadTask = Data.videoRef.put(Data.video, Data.metadata); // not await as we want to async put files

      await new Promise((resolve, reject) => {
      uploadTask.on(
        "state_changed", // or 'state_changed'
        (snapshot) => {
          // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
          UploadingProgress(
            true,
            mediaIndex,
            snapshot.bytesTransferred,
            snapshot.totalBytes
          );
        },
        (error) => {
          console.log(error.code);
          url = false;
          reject(error.code);
          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
          uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
            url = downloadURL;
            UploadingProgress(false, null, 0, 10000000);
            //resolve(downloadURL);
          });
        }
      );
      });
      return url;
    } catch (error) {
      console.log("Error @uploadProgress: ", error);
    }
  }, 

And UploadProgress:

  const showUploading = (status, mediaIndex, bytesTransferred, totalBytes) => {
    if (status) {
      //if the status (which is snapshot listner status) is true, then will show upload progress
      if (!isUploading) {
        setIsUploading(true);
        let tempMediaPercentages = new Map(); 

        tempMediaPercentages.set(mediaIndex, bytesTransferred / totalBytes);

        setMediaPercentages(tempMediaPercentages);

        console.log(mediaIndex, tempMediaPercentages);
      }
    } else {
      setIsUploading(false);
      setUploadPercentage(0);
      setMediaPercentages(new Map()); // resets the media percentages
    }
  };

The state variable I'm trying to manipulate is "mediaPercentages", a map but in the scenario where I have 2 async calls on "feedUploadProgress" the state changes aren't made but instead of 1 state being updated by each of these async calls, what I get instead is seemingly 2 different states that aren't aware of the changes made by each separate function call.

In this screen shot below I console log the entire state which should contain 2 key-value pairs, 0 & 1, but as the map is getting changed it makes seemingly independent changes rather than having 1 map containing 2 key-value pairs together.