diff --git a/src/components/utils/useUniqId.ts b/src/components/utils/useUniqId.ts
index a9bb50ba4f..cf660620f3 100644
--- a/src/components/utils/useUniqId.ts
+++ b/src/components/utils/useUniqId.ts
@@ -1,8 +1,19 @@
 import React from 'react';
 
+import {NAMESPACE_NEW} from './cn';
 import {getUniqId} from './common';
 
-export function useUniqId() {
-    const idRef = React.useRef(getUniqId());
+function useUniqIdFallback() {
+    const idRef = React.useRef<string>();
+    if (idRef.current === undefined) {
+        idRef.current = getUniqId();
+    }
     return idRef.current;
 }
+
+function useIdNative() {
+    return `${NAMESPACE_NEW}${React.useId()}`;
+}
+
+export const useUniqId: () => string =
+    typeof React.useId === 'function' ? useIdNative : useUniqIdFallback;