diff --git a/packages/react/src/components/Popover.tsx b/packages/react/src/components/Popover.tsx
index 5a832423..7bb7cf10 100644
--- a/packages/react/src/components/Popover.tsx
+++ b/packages/react/src/components/Popover.tsx
@@ -9,6 +9,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -266,7 +267,8 @@ function PopoverPopup({ id, className, children }: PopoverPopupProps): JSX.Eleme
   const { popupRef, triggerRef, transitionStatus, placement } = usePopoverContext();
   const triggerElement = triggerRef.current;
 
-  const popupId = useMemo(() => id ?? `popover-${Math.random().toString(36).substring(2, 9)}`, [id]);
+  const uniqueId = useId();
+  const popupId = id ?? uniqueId;
 
   useEffect(() => {
     if (!popupRef.current || !triggerRef.current) return;
diff --git a/packages/react/src/components/Tooltip.tsx b/packages/react/src/components/Tooltip.tsx
index cfb53930..84cb68b5 100644
--- a/packages/react/src/components/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip.tsx
@@ -9,6 +9,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -307,7 +308,8 @@ function TooltipPopup({ id, className = '', children }: TooltipPopupProps): JSX.
   const { popupRef, triggerRef, transitionStatus, placement } = useTooltipContext();
   const triggerElement = triggerRef.current;
 
-  const popupId = useMemo(() => id ?? `tooltip-${Math.random().toString(36).substring(2, 9)}`, [id]);
+  const uniqueId = useId();
+  const popupId = id ?? uniqueId;
 
   useEffect(() => {
     if (!popupRef.current || !triggerRef.current) return;