diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx
index 612af0a..d182ed2 100644
--- a/components/modal/modal.tsx
+++ b/components/modal/modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import usePortal from '../utils/use-portal'
 import ModalTitle from './modal-title'
@@ -11,6 +11,7 @@ import Backdrop from '../shared/backdrop'
 import { ModalConfig, ModalContext } from './modal-context'
 import { pickChild } from '../utils/collections'
 import useBodyScroll from '../utils/use-body-scroll'
+import useCurrentState from '../utils/use-current-state'
 
 interface Props {
   disableBackdropClick?: boolean
@@ -41,25 +42,27 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
 }) => {
   const portal = usePortal('modal')
   const [, setBodyHidden] = useBodyScroll()
-  const [visible, setVisible] = useState<boolean>(false)
+  const [visible, setVisible, visibleRef] = useCurrentState<boolean>(false)
   const [withoutActionsChildren, ActionsChildren] = pickChild(children, ModalAction)
   const hasActions = ActionsChildren && React.Children.count(ActionsChildren) > 0
 
   const closeModal = () => {
-    setVisible(false)
     onClose && onClose()
+    setVisible(false)
+    setBodyHidden(false)
   }
 
   useEffect(() => {
     if (open === undefined) return
-    setVisible(open)
-    setBodyHidden(open)
-
     if (open) {
       onOpen && onOpen()
-    } else {
+    }
+    if (!open && visibleRef.current) {
       onClose && onClose()
     }
+
+    setVisible(open)
+    setBodyHidden(open)
   }, [open])
 
   const closeFromBackdrop = () => {
diff --git a/pages/en-us/components/modal.mdx b/pages/en-us/components/modal.mdx
index 57fb9c2..4ee9d0d 100644
--- a/pages/en-us/components/modal.mdx
+++ b/pages/en-us/components/modal.mdx
@@ -38,7 +38,7 @@ Display popup content that requires attention or provides additional information
         <Modal.Content>
           <p>Some content contained within the modal.</p>
         </Modal.Content>
-        <Modal.Action passive>Cancel</Modal.Action>
+        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>
         <Modal.Action>Submit</Modal.Action>
       </Modal>
     </div>
@@ -63,7 +63,7 @@ Display popup content that requires attention or provides additional information
         <Modal.Content>
           <p>Some content contained within the modal.</p>
         </Modal.Content>
-        <Modal.Action passive>Cancel</Modal.Action>
+        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
         <Modal.Action>Submit</Modal.Action>
       </Modal>
     </>
@@ -119,7 +119,7 @@ Display popup content that requires attention or provides additional information
         <Modal.Content>
           <p>Some content contained within the modal.</p>
         </Modal.Content>
-        <Modal.Action passive>Cancel</Modal.Action>
+        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>
         <Modal.Action disabled>Submit</Modal.Action>
       </Modal>
     </>