diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx b/packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx
index f3b58e5b9c..80ce8b2333 100644
--- a/packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx
+++ b/packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx
@@ -36,3 +36,24 @@ export const UsingHook = () => {
 
   return <Button onClick={showConfirm}>Show confirm</Button>;
 };
+
+export const AutoClose = () => {
+  const { openConfirmModal } = useConfirmModal();
+
+  const onConfirm = () => {
+    openConfirmModal({
+      cancelText: 'Cancel',
+      confirmButtonOptions: {
+        children: 'Confirm',
+      },
+      title: 'Confirm Modal',
+      children: 'Are you sure you want to confirm?',
+      onConfirm: () => console.log('Confirmed'),
+      onCancel: () => {
+        console.log('Cancelled');
+      },
+    });
+  };
+
+  return <Button onClick={onConfirm}>Show confirm</Button>;
+};
diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.tsx b/packages/frontend/component/src/ui/modal/confirm-modal.tsx
index 6ef27bbf2b..8d28583a2a 100644
--- a/packages/frontend/component/src/ui/modal/confirm-modal.tsx
+++ b/packages/frontend/component/src/ui/modal/confirm-modal.tsx
@@ -104,8 +104,8 @@ export const ConfirmModalProvider = ({ children }: PropsWithChildren) => {
 
       const onConfirm = () => {
         setLoading(true);
-        _onConfirm?.()
-          ?.then(() => onSuccess?.())
+        return Promise.resolve(_onConfirm?.())
+          .then(() => onSuccess?.())
           .catch(console.error)
           .finally(() => autoClose && closeConfirmModal());
       };