diff --git a/src/components/UploadProgress/dialog.tsx b/src/components/UploadProgress/dialog.tsx
index a130bb954..925a6ff7d 100644
--- a/src/components/UploadProgress/dialog.tsx
+++ b/src/components/UploadProgress/dialog.tsx
@@ -1,7 +1,7 @@
 import { DialogContent } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { UPLOAD_STAGES, UPLOAD_RESULT } from 'constants/upload';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { UploadProgressFooter } from './footer';
 import { UploadProgressHeader } from './header';
 import { InProgressSection } from './inProgressSection';
@@ -16,19 +16,22 @@ export function UploadProgressDialog() {
         UploadProgressContext
     );
 
-    const hasUnUploadedFiles = useMemo(() => {
-        if (
-            finishedUploads.get(UPLOAD_RESULT.ALREADY_UPLOADED)?.length > 0 ||
-            finishedUploads.get(UPLOAD_RESULT.BLOCKED)?.length > 0 ||
-            finishedUploads.get(UPLOAD_RESULT.FAILED)?.length > 0 ||
-            finishedUploads.get(UPLOAD_RESULT.LARGER_THAN_AVAILABLE_STORAGE)
-                ?.length > 0 ||
-            finishedUploads.get(UPLOAD_RESULT.TOO_LARGE)?.length > 0 ||
-            finishedUploads.get(UPLOAD_RESULT.UNSUPPORTED)?.length > 0
-        ) {
-            return true;
-        } else {
-            return false;
+    const [hasUnUploadedFiles, setHasUnUploadedFiles] = useState(false);
+
+    useEffect(() => {
+        if (!hasUnUploadedFiles) {
+            if (
+                finishedUploads.get(UPLOAD_RESULT.ALREADY_UPLOADED)?.length >
+                    0 ||
+                finishedUploads.get(UPLOAD_RESULT.BLOCKED)?.length > 0 ||
+                finishedUploads.get(UPLOAD_RESULT.FAILED)?.length > 0 ||
+                finishedUploads.get(UPLOAD_RESULT.LARGER_THAN_AVAILABLE_STORAGE)
+                    ?.length > 0 ||
+                finishedUploads.get(UPLOAD_RESULT.TOO_LARGE)?.length > 0 ||
+                finishedUploads.get(UPLOAD_RESULT.UNSUPPORTED)?.length > 0
+            ) {
+                setHasUnUploadedFiles(true);
+            }
         }
     }, [finishedUploads]);
 
diff --git a/src/components/UploadProgress/index.tsx b/src/components/UploadProgress/index.tsx
index 8e2e3bde6..8996b0c30 100644
--- a/src/components/UploadProgress/index.tsx
+++ b/src/components/UploadProgress/index.tsx
@@ -1,6 +1,6 @@
 import { UploadProgressDialog } from './dialog';
 import { MinimizedUploadProgress } from './minimized';
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useState } from 'react';
 
 import constants from 'utils/strings/constants';
 import { UPLOAD_STAGES } from 'constants/upload';
@@ -9,10 +9,8 @@ import { dialogCloseHandler } from 'components/DialogBox/base';
 import {
     UploadFileNames,
     UploadCounter,
-    InProgressUploads,
-    InProgressUpload,
-    FinishedUploads,
     SegregatedFinishedUploads,
+    InProgressUpload,
 } from 'types/upload/ui';
 import UploadProgressContext from 'contexts/uploadProgress';
 
@@ -23,9 +21,9 @@ interface Props {
     uploadStage: UPLOAD_STAGES;
     percentComplete: number;
     retryFailed: () => void;
-    inProgressUploads: InProgressUploads;
+    inProgressUploads: InProgressUpload[];
     uploadFileNames: UploadFileNames;
-    finishedUploads: FinishedUploads;
+    finishedUploads: SegregatedFinishedUploads;
     hasLivePhotos: boolean;
     cancelUploads: () => void;
 }
@@ -38,37 +36,13 @@ export default function UploadProgress({
     retryFailed,
     uploadFileNames,
     hasLivePhotos,
+    inProgressUploads,
+    finishedUploads,
     ...props
 }: Props) {
     const appContext = useContext(AppContext);
     const [expanded, setExpanded] = useState(true);
 
-    const inProgressUploads = useMemo(
-        () =>
-            [...props.inProgressUploads.entries()].map(
-                ([localFileID, progress]) =>
-                    ({
-                        localFileID,
-                        progress,
-                    } as InProgressUpload)
-            ),
-
-        [props.inProgressUploads]
-    );
-
-    const finishedUploads = useMemo(() => {
-        const finishedUploads = new Map() as SegregatedFinishedUploads;
-        for (const [localID, result] of props.finishedUploads) {
-            if (!finishedUploads.has(result)) {
-                finishedUploads.set(result, []);
-            }
-            finishedUploads.get(result).push(localID);
-        }
-        return finishedUploads;
-    }, [props.finishedUploads]);
-
-    console.log(finishedUploads);
-
     function confirmCancelUpload() {
         appContext.setDialogMessage({
             title: constants.STOP_UPLOADS_HEADER,
diff --git a/src/components/pages/gallery/Upload.tsx b/src/components/pages/gallery/Upload.tsx
index 85a2b65c8..45990e1da 100644
--- a/src/components/pages/gallery/Upload.tsx
+++ b/src/components/pages/gallery/Upload.tsx
@@ -28,9 +28,9 @@ import DiscFullIcon from '@mui/icons-material/DiscFull';
 import { NotificationAttributes } from 'types/Notification';
 import {
     UploadFileNames,
-    InProgressUploads,
     UploadCounter,
-    FinishedUploads,
+    SegregatedFinishedUploads,
+    InProgressUpload,
 } from 'types/upload/ui';
 import { UPLOAD_STAGES } from 'constants/upload';
 
@@ -87,11 +87,11 @@ export default function Upload(props: Props) {
         finished: 0,
         total: 0,
     });
-    const [inProgressUploads, setInProgressUploads] =
-        useState<InProgressUploads>(new Map());
-    const [finishedUploads, setFinishedUploads] = useState<FinishedUploads>(
-        new Map()
-    );
+    const [inProgressUploads, setInProgressUploads] = useState<
+        InProgressUpload[]
+    >([]);
+    const [finishedUploads, setFinishedUploads] =
+        useState<SegregatedFinishedUploads>(new Map());
     const [percentComplete, setPercentComplete] = useState(0);
     const [hasLivePhotos, setHasLivePhotos] = useState(false);
 
@@ -180,7 +180,7 @@ export default function Upload(props: Props) {
     const uploadInit = function () {
         setUploadStage(UPLOAD_STAGES.START);
         setUploadCounter({ finished: 0, total: 0 });
-        setInProgressUploads(new Map());
+        setInProgressUploads([]);
         setFinishedUploads(new Map());
         setPercentComplete(0);
         props.closeCollectionSelector();
diff --git a/src/services/upload/uiService.ts b/src/services/upload/uiService.ts
index 4217c238f..b5828c743 100644
--- a/src/services/upload/uiService.ts
+++ b/src/services/upload/uiService.ts
@@ -3,14 +3,20 @@ import {
     RANDOM_PERCENTAGE_PROGRESS_FOR_PUT,
     UPLOAD_STAGES,
 } from 'constants/upload';
-import { ProgressUpdater } from 'types/upload/ui';
+import {
+    FinishedUploads,
+    InProgressUpload,
+    InProgressUploads,
+    ProgressUpdater,
+    SegregatedFinishedUploads,
+} from 'types/upload/ui';
 
 class UIService {
     private perFileProgress: number;
     private filesUploaded: number;
     private totalFileCount: number;
-    private inProgressUploads: Map<number, number>;
-    private finishedUploads: Map<number, UPLOAD_RESULT>;
+    private inProgressUploads: InProgressUploads;
+    private finishedUploads: FinishedUploads;
     private progressUpdater: ProgressUpdater;
 
     init(progressUpdater: ProgressUpdater) {
@@ -88,8 +94,12 @@ class UIService {
         }
 
         setPercentComplete(percentComplete);
-        setInProgressUploads(this.inProgressUploads);
-        setFinishedUploads(this.finishedUploads);
+        setInProgressUploads(
+            this.convertInProgressUploadsToList(this.inProgressUploads)
+        );
+        setFinishedUploads(
+            this.segregatedFinishedUploadsToList(this.finishedUploads)
+        );
     }
 
     trackUploadProgress(
@@ -127,6 +137,28 @@ class UIService {
             },
         };
     }
+
+    convertInProgressUploadsToList(inProgressUploads) {
+        return [...inProgressUploads.entries()].map(
+            ([localFileID, progress]) =>
+                ({
+                    localFileID,
+                    progress,
+                } as InProgressUpload)
+        );
+    }
+
+    segregatedFinishedUploadsToList(finishedUploads: FinishedUploads) {
+        const segregatedFinishedUploads =
+            new Map() as SegregatedFinishedUploads;
+        for (const [localID, result] of finishedUploads) {
+            if (!segregatedFinishedUploads.has(result)) {
+                segregatedFinishedUploads.set(result, []);
+            }
+            segregatedFinishedUploads.get(result).push(localID);
+        }
+        return segregatedFinishedUploads;
+    }
 }
 
 export default new UIService();
diff --git a/src/types/upload/ui.ts b/src/types/upload/ui.ts
index edb9014bb..4c0fc5531 100644
--- a/src/types/upload/ui.ts
+++ b/src/types/upload/ui.ts
@@ -32,9 +32,11 @@ export interface ProgressUpdater {
     setUploadCounter: React.Dispatch<React.SetStateAction<UploadCounter>>;
     setUploadStage: React.Dispatch<React.SetStateAction<UPLOAD_STAGES>>;
     setInProgressUploads: React.Dispatch<
-        React.SetStateAction<InProgressUploads>
+        React.SetStateAction<InProgressUpload[]>
+    >;
+    setFinishedUploads: React.Dispatch<
+        React.SetStateAction<SegregatedFinishedUploads>
     >;
-    setFinishedUploads: React.Dispatch<React.SetStateAction<FinishedUploads>>;
     setUploadFilenames: React.Dispatch<React.SetStateAction<UploadFileNames>>;
     setHasLivePhotos: React.Dispatch<React.SetStateAction<boolean>>;
 }