diff --git a/react/ui-components/src/atoms/UploadImage.js b/react/ui-components/src/atoms/UploadImage.js
index 61acecf98b..6dc1f9adf9 100644
--- a/react/ui-components/src/atoms/UploadImage.js
+++ b/react/ui-components/src/atoms/UploadImage.js
@@ -34,15 +34,12 @@ const UploadImage = ({
     }
   };
   useEffect(() => {
-    window.addEventListener("resize", () => {
-      onResize();
-    });
+    window.addEventListener("resize", onResize);
+  
     return () => {
-      window.addEventListener("resize", () => {
-        onResize();
-      });
+      window.removeEventListener("resize", onResize);
     };
-  });
+  }, []);
 
   const selectfile = (e) => {
     handleChange(e);
@@ -145,7 +142,7 @@ const UploadImage = ({
       <div className="digit-img-container">
         {previews.map((preview, index) => {
           return (
-            <Fragment key={index}>
+            <Fragment key={`preview-${index}`}>
               <div
                 className={`preview-container ${
                   uploadedFilesCount > 1 ? " multiple" : ""
diff --git a/react/ui-components/src/atoms/UploadPopup.js b/react/ui-components/src/atoms/UploadPopup.js
index 42b6744065..deafe4ba50 100644
--- a/react/ui-components/src/atoms/UploadPopup.js
+++ b/react/ui-components/src/atoms/UploadPopup.js
@@ -39,15 +39,12 @@ const UploadPopup = ({
     }
   };
   useEffect(() => {
-    window.addEventListener("resize", () => {
-      onResize();
-    });
+    window.addEventListener("resize", onResize);
+  
     return () => {
-      window.addEventListener("resize", () => {
-        onResize();
-      });
+      window.removeEventListener("resize", onResize);
     };
-  });
+  }, []);
 
   const dragDropJSX = (
     <div
@@ -105,8 +102,7 @@ const UploadPopup = ({
   };
 
   const handleChange = async (newFiles) => {
-    let newlyUploadedFiles;
-    newlyUploadedFiles = multiple ? [...files, ...newFiles] : [newFiles];
+    const newlyUploadedFiles = multiple ? [...files, ...newFiles] : [newFiles];
     setFiles(newlyUploadedFiles);
   };