diff --git a/src/components/ReactFileUtilities/utils.ts b/src/components/ReactFileUtilities/utils.ts
index f1c5060e6..46af21740 100644
--- a/src/components/ReactFileUtilities/utils.ts
+++ b/src/components/ReactFileUtilities/utils.ts
@@ -1,21 +1,26 @@
 import type { FileLike } from './types';
+import { ChangeEvent, useCallback } from 'react';
 
 export const useHandleFileChangeWrapper = (
   resetOnChange = false,
   handler?: (files: Array<File>) => void,
-) => ({ currentTarget }: React.ChangeEvent<HTMLInputElement>) => {
-  const { files } = currentTarget;
+) =>
+  useCallback(
+    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
+      const { files } = currentTarget;
 
-  if (!files) return;
+      if (!files) return;
 
-  try {
-    handler?.(Array.from(files));
-  } catch (error) {
-    console.error(error);
-  }
+      try {
+        handler?.(Array.from(files));
+      } catch (error) {
+        console.error(error);
+      }
 
-  if (resetOnChange) currentTarget.value = '';
-};
+      if (resetOnChange) currentTarget.value = '';
+    },
+    [handler, resetOnChange],
+  );
 
 export function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {
   if (!items || !items.length) {
diff --git a/src/components/index.ts b/src/components/index.ts
index a52237d03..d8f57cc80 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -31,3 +31,5 @@ export * from './Tooltip';
 export * from './TypingIndicator';
 export * from './UserItem';
 export * from './Window';
+
+export { UploadButton, UploadButtonProps } from './ReactFileUtilities';