diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index 7710e82..69e796a 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -75,4 +75,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/package.json b/package.json
index b621557..2f946f7 100644
--- a/package.json
+++ b/package.json
@@ -36,12 +36,12 @@
     "prepublishOnly": "npm run compile && rc-np",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "start": "dumi dev",
-    "test": "umi-test",
+    "test": "rc-test",
     "watch": "father dev"
   },
   "dependencies": {
     "@rc-component/portal": "^2.0.0",
-    "@rc-component/trigger": "^2.0.0",
+    "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.2.1",
     "classnames": "^2.3.2"
   },
@@ -60,10 +60,10 @@
     "father": "^4.0.0",
     "gh-pages": "^3.1.0",
     "prettier": "^3.0.0",
+    "rc-test": "^7.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.0.0",
-    "umi-test": "^1.9.7"
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
diff --git a/src/Tour.tsx b/src/Tour.tsx
index e950558..9e167a0 100644
--- a/src/Tour.tsx
+++ b/src/Tour.tsx
@@ -235,7 +235,7 @@ const Tour: React.FC<TourProps> = props => {
         prefixCls={prefixCls}
         popup={getPopupElement}
         forceRender={false}
-        destroyPopupOnHide
+        autoDestroy
         zIndex={zIndex}
         getTriggerDOMNode={getTriggerDOMNode}
         arrow={!!mergedArrow}
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 823f744..281c083 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`Tour animated placeholder true 1`] = `
   <div>
     <div
       class="rc-tour customClassName rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -246,7 +246,7 @@ exports[`Tour animated true 1`] = `
   <div>
     <div
       class="rc-tour customClassName rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -427,7 +427,7 @@ exports[`Tour renderPanel basic 1`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -538,7 +538,7 @@ exports[`Tour rootClassName 1`] = `
   <div>
     <div
       class="rc-tour customClassName rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -658,7 +658,7 @@ exports[`Tour run in strict mode 1`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-pannel"
@@ -822,7 +822,7 @@ exports[`Tour run in strict mode 2`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -944,7 +944,7 @@ exports[`Tour should keep current when controlled 1`] = `
   <div>
     <div
       class="rc-tour"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-pannel"
@@ -1062,7 +1062,7 @@ exports[`Tour should return step 1 when reopen 1`] = `
   <div>
     <div
       class="rc-tour"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-pannel"
@@ -1220,7 +1220,7 @@ exports[`Tour should update position when window resize 1`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -1373,7 +1373,7 @@ exports[`Tour showArrow should show tooltip arrow default 1`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-pannel"
@@ -1522,7 +1522,7 @@ exports[`Tour single 1`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -1677,7 +1677,7 @@ exports[`Tour use custom builtinPlacements 1`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -1832,7 +1832,7 @@ exports[`Tour use custom builtinPlacements 2`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"
@@ -1998,7 +1998,7 @@ exports[`Tour use custom builtinPlacements 3`] = `
   <div>
     <div
       class="rc-tour rc-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="rc-tour-arrow"