diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
index cb0f31e8..e3ed3288 100644
--- a/src/dialog/Dialog.tsx
+++ b/src/dialog/Dialog.tsx
@@ -229,7 +229,7 @@ export const Dialog: React.FC<DialogProps> = (props) => {
     >
       {showOverlay ? (
         <animated.div style={maskSpring}>
-          <Overlay onOverlayClick={onOverlayClickHandle} disableBodyScroll={false} />
+          <Overlay visible={visible} onClick={onOverlayClickHandle} />
         </animated.div>
       ) : null}
       <div className="wrap" style={wrapStyle}>
diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx
index 65b9e9ae..0e310245 100644
--- a/src/drawer/Drawer.tsx
+++ b/src/drawer/Drawer.tsx
@@ -8,18 +8,8 @@ enum PopupSourceEnum {
 }
 
 const Drawer: React.FC<TdDrawerProps> = (props) => {
-  const {
-    items,
-    visible,
-    showOverlay,
-    zIndex,
-    closeOnOverlayClick,
-    destroyOnClose,
-    placement,
-    onClose,
-    onItemClick,
-    onOverlayClick,
-  } = props;
+  const { items, visible, showOverlay, zIndex, closeOnOverlayClick, placement, onClose, onItemClick, onOverlayClick } =
+    props;
 
   const { classPrefix } = useConfig();
   const name = `${classPrefix}-drawer`;
@@ -34,7 +24,7 @@ const Drawer: React.FC<TdDrawerProps> = (props) => {
 
   const [show, setShow] = useState(visible);
 
-  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleOverlayClick = (e) => {
     const context = { e };
     onOverlayClick?.(context);
     if (closeOnOverlayClick) {
@@ -57,9 +47,9 @@ const Drawer: React.FC<TdDrawerProps> = (props) => {
       <Popup
         visible={show}
         placement={placement}
-        overlayProps={{ onOverlayClick: handleOverlayClick, destroyOnClose }}
         showOverlay={showOverlay}
         zIndex={zIndex}
+        onVisibleChange={handleOverlayClick}
       >
         <div className={`${name}__sidebar`}>
           {items?.map((item, index) => {
diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
index ec465cdc..a7dd811b 100644
--- a/src/popup/Popup.tsx
+++ b/src/popup/Popup.tsx
@@ -3,7 +3,6 @@ import classnames from 'classnames';
 import { useSpring, animated } from 'react-spring';
 import Overlay from '../overlay';
 import useDefault from '../_util/useDefault';
-import { PropagationEvent } from '../_util/withStopPropagation';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
 import { TdPopupProps } from './type';
 import useConfig from '../_util/useConfig';
@@ -79,15 +78,7 @@ const Popup: FC<PopupProps> = (props) => {
   return withNativeProps(
     props,
     <div className={`${name}`} style={rootStyles}>
-      {showOverlay && (
-        <Overlay
-          visible={show}
-          onOverlayClick={handleOverlayClick}
-          disableBodyScroll={false}
-          stopPropagation={[PropagationEvent.CLICK, PropagationEvent.SCROLL]}
-          {...overlayProps}
-        />
-      )}
+      {showOverlay && <Overlay visible={show} onClick={handleOverlayClick} {...overlayProps} />}
       <animated.div className={classnames([`${name}--content`, `${name}--content-${placement}`])} style={contentStyle}>
         {active && children}
       </animated.div>