diff --git a/package.json b/package.json
index 960b69ac..a19bcf68 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-dialog",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "description": "dialog ui component for react",
   "keywords": [
     "react",
@@ -49,7 +49,7 @@
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.6",
     "rc-motion": "^2.3.0",
-    "rc-util": "^5.6.1"
+    "rc-util": "^5.21.0"
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.7",
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
index 58fda75b..a2c24599 100644
--- a/src/Dialog/index.tsx
+++ b/src/Dialog/index.tsx
@@ -2,12 +2,13 @@ import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
+import useId from 'rc-util/lib/hooks/useId';
 import contains from 'rc-util/lib/Dom/contains';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import type ScollLocker from 'rc-util/lib/Dom/scrollLocker';
 import type { IDialogPropTypes } from '../IDialogPropTypes';
 import Mask from './Mask';
-import { getMotionName, getUUID } from '../util';
+import { getMotionName } from '../util';
 import type { ContentRef } from './Content';
 import Content from './Content';
 
@@ -57,10 +58,7 @@ export default function Dialog(props: IDialogChildProps) {
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
 
   // ========================== Init ==========================
-  const ariaIdRef = useRef<string>();
-  if (!ariaIdRef.current) {
-    ariaIdRef.current = `rcDialogTitle${getUUID()}`;
-  }
+  const ariaId = useId();
 
   // ========================= Events =========================
   function onDialogVisibleChanged(newVisible: boolean) {
@@ -184,7 +182,7 @@ export default function Dialog(props: IDialogChildProps) {
         className={classNames(`${prefixCls}-wrap`, wrapClassName)}
         ref={wrapperRef}
         onClick={onWrapperClick}
-        aria-labelledby={title ? ariaIdRef.current : null}
+        aria-labelledby={title ? ariaId : null}
         style={{ zIndex, ...wrapStyle, display: !animatedVisible ? 'none' : null }}
         {...wrapProps}
       >
@@ -194,7 +192,7 @@ export default function Dialog(props: IDialogChildProps) {
           onMouseUp={onContentMouseUp}
           ref={contentRef}
           closable={closable}
-          ariaId={ariaIdRef.current}
+          ariaId={ariaId}
           prefixCls={prefixCls}
           visible={visible}
           onClose={onInternalClose}
diff --git a/src/util.ts b/src/util.ts
index 7751afca..07ec4199 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -7,13 +7,6 @@ export function getMotionName(prefixCls: string, transitionName?: string, animat
   return motionName;
 }
 
-// ================================ UUID ================================
-let uuid = -1;
-export function getUUID() {
-  uuid += 1;
-  return uuid;
-}
-
 // =============================== Offset ===============================
 function getScroll(w: Window, top?: boolean): number {
   let ret = w[`page${top ? 'Y' : 'X'}Offset`];
@@ -30,7 +23,7 @@ function getScroll(w: Window, top?: boolean): number {
 
 type CompatibleDocument = {
   parentWindow?: Window;
-} & Document
+} & Document;
 
 export function offset(el: Element) {
   const rect = el.getBoundingClientRect();
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index c327fd52..c6fb4f46 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -57,6 +57,7 @@ exports[`dialog should render correct 1`] = `
     class="rc-dialog-mask"
   />
   <div
+    aria-labelledby="test-id"
     class="rc-dialog-wrap"
     tabindex="-1"
   >
@@ -82,6 +83,16 @@ exports[`dialog should render correct 1`] = `
             class="rc-dialog-close-x"
           />
         </button>
+        <div
+          class="rc-dialog-header"
+        >
+          <div
+            class="rc-dialog-title"
+            id="test-id"
+          >
+            Default
+          </div>
+        </div>
         <div
           class="rc-dialog-body"
         />
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 687819b3..c4dd0099 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -18,7 +18,7 @@ describe('dialog', () => {
   });
 
   it('should render correct', () => {
-    const wrapper = mount(<Dialog visible />);
+    const wrapper = mount(<Dialog title="Default" visible />);
     jest.runAllTimers();
     wrapper.update();