diff --git a/.changeset/early-ravens-visit.md b/.changeset/early-ravens-visit.md
new file mode 100644
index 00000000000..f9dc700a5d4
--- /dev/null
+++ b/.changeset/early-ravens-visit.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": minor
+---
+
+- New: Exposes new `useMergedRefs` hook that can merge two refs into a single combined ref
+- Deprecates `useRefObjectAsForwardedRef`; see doc comment for migration instructions
+- Deprecates `useProvidedRefOrCreate`; see doc comment for migration instructions
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index ee9213fcb50..53cf3ede473 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -1,11 +1,11 @@
-import React, {type JSX} from 'react'
+import React, {useRef, type JSX} from 'react'
 import {fixedForwardRef} from '../utils/modern-polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {useSlots} from '../hooks/useSlots'
 import {Heading} from './Heading'
 import {useId} from '../hooks/useId'
 import {ListContext, type ActionListProps} from './shared'
-import {useProvidedRefOrCreate} from '../hooks'
+import {useMergedRefs} from '../hooks'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
@@ -41,7 +41,8 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
 
   const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy
   const listRole = role || listRoleFromContainer
-  const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLUListElement>)
+  const listRef = useRef<HTMLElement>(null)
+  const mergedRef = useMergedRefs(forwardedRef, listRef)
 
   let enableFocusZone = false
   if (enableFocusZoneFromContainer !== undefined) enableFocusZone = enableFocusZoneFromContainer
@@ -69,12 +70,11 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
   return (
     <ListContext.Provider value={listContextValue}>
       {slots.heading}
-      {/* @ts-expect-error ref needs a non nullable ref */}
       <Component
         className={clsx(classes.ActionList, className)}
         role={listRole}
         aria-labelledby={ariaLabelledBy}
-        ref={listRef}
+        ref={mergedRef}
         data-dividers={showDividers}
         data-variant={variant}
         {...restProps}
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index e501b117377..0bf371af037 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -1,9 +1,9 @@
-import React, {useCallback, useContext, useMemo, useEffect, useState} from 'react'
+import React, {useCallback, useContext, useMemo, useEffect, useState, useRef} from 'react'
 import {TriangleDownIcon, ChevronRightIcon} from '@primer/octicons-react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import type {OverlayProps} from '../Overlay'
-import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuKeyboardNavigation} from '../hooks'
+import {useProvidedStateOrCreate, useMenuKeyboardNavigation, useMergedRefs} from '../hooks'
 import {Divider} from '../ActionList/Divider'
 import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
 import type {ButtonProps} from '../Button'
@@ -110,7 +110,9 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
   )
   const menuButtonChildId = React.isValidElement(menuButtonChild) ? menuButtonChild.props.id : undefined
 
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  const anchorRef = useRef<HTMLElement>(null)
+  const mergedRef = useMergedRefs(anchorRef, externalAnchorRef)
+
   const anchorId = useId(menuButtonChildId)
   let renderAnchor: AnchoredOverlayProps['renderAnchor'] = null
   // 🚨 Hack for good API!
@@ -130,7 +132,7 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
             anchorChildren,
             mergeAnchorHandlers({...anchorProps}, anchorChildren.props),
           )
-          return React.cloneElement(child, {children: triggerButton, ref: anchorRef})
+          return React.cloneElement(child, {children: triggerButton, ref: combinedRef})
         }
       }
       return null
@@ -149,7 +151,7 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
               mergeAnchorHandlers({...anchorProps}, tooltipTrigger.props),
             )
             const tooltip = React.cloneElement(anchorChildren, {children: tooltipTriggerEl})
-            return React.cloneElement(child, {children: tooltip, ref: anchorRef})
+            return React.cloneElement(child, {children: tooltip, ref: combinedRef})
           }
         }
       } else {
@@ -278,7 +280,7 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
   // we typecast anchorRef as required instead of optional
   // because we know that we're setting it in context in Menu
   const {
-    anchorRef,
+    anchorRef: contextAnchorRef,
     renderAnchor,
     anchorId,
     open,
@@ -287,6 +289,9 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
     isSubmenu = false,
   } = React.useContext(MenuContext) as MandateProps<MenuContextProps, 'anchorRef'>
 
+  const anchorRef = useRef<HTMLElement>(null)
+  const combinedAnchorRef = useMergedRefs(anchorRef, contextAnchorRef)
+
   const containerRef = React.useRef<HTMLDivElement>(null)
   const isNarrow = useResponsiveValue({narrow: true}, false)
 
@@ -328,7 +333,7 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
 
   return (
     <AnchoredOverlay
-      anchorRef={anchorRef}
+      anchorRef={combinedAnchorRef}
       renderAnchor={renderAnchor}
       anchorId={anchorId}
       open={open}
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index f60070447b3..11a80529171 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -1,12 +1,12 @@
 import type React from 'react'
-import {useCallback, useEffect, type JSX} from 'react'
+import {useCallback, useEffect, useRef, type JSX} from 'react'
 import type {OverlayProps} from '../Overlay'
 import Overlay from '../Overlay'
 import type {FocusTrapHookSettings} from '../hooks/useFocusTrap'
 import {useFocusTrap} from '../hooks/useFocusTrap'
 import type {FocusZoneHookSettings} from '../hooks/useFocusZone'
 import {useFocusZone} from '../hooks/useFocusZone'
-import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
+import {useAnchoredPosition, useMergedRefs, useRenderForcingRef} from '../hooks'
 import {useId} from '../hooks/useId'
 import type {AnchorPosition, PositionSettings} from '@primer/behaviors'
 import {type ResponsiveValue} from '../hooks/useResponsiveValue'
@@ -27,7 +27,7 @@ interface AnchoredOverlayPropsWithAnchor {
   /**
    * An override to the internal ref that will be spread on to the renderAnchor
    */
-  anchorRef?: React.RefObject<HTMLElement | null>
+  anchorRef?: React.Ref<HTMLElement | null>
 
   /**
    * An override to the internal id that will be spread on to the renderAnchor
@@ -46,7 +46,7 @@ interface AnchoredOverlayPropsWithoutAnchor {
    * An override to the internal renderAnchor ref that will be used to position the overlay.
    * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu.
    */
-  anchorRef: React.RefObject<HTMLElement | null>
+  anchorRef: React.Ref<HTMLElement | null>
   /**
    * An override to the internal id that will be spread on to the renderAnchor
    */
@@ -160,8 +160,12 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   displayCloseButton = true,
   closeButtonProps = defaultCloseButtonProps,
 }) => {
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  const anchorRef = useRef<HTMLElement>(null)
+  const mergedRef = useMergedRefs(anchorRef, externalAnchorRef)
+
   const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
+  const combinedOverlayRef = useMergedRefs(updateOverlayRef, overlayProps?.ref)
+
   const anchorId = useId(externalAnchorId)
 
   const onClickOutside = useCallback(() => onClose?.('click-outside'), [onClose])
@@ -235,7 +239,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
     <>
       {renderAnchor &&
         renderAnchor({
-          ref: anchorRef,
+          ref: combinedRef,
           id: anchorId,
           'aria-haspopup': 'true',
           'aria-expanded': open,
@@ -261,12 +265,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           preventOverflow={preventOverflow}
           data-component="AnchoredOverlay"
           {...overlayProps}
-          ref={node => {
-            if (overlayProps?.ref) {
-              assignRef(overlayProps.ref, node)
-            }
-            updateOverlayRef(node)
-          }}
+          ref={combinedOverlayRef}
         >
           {showXIcon ? (
             <div className={classes.ResponsiveCloseButtonContainer}>
@@ -293,15 +292,4 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   )
 }
 
-function assignRef<T>(
-  ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,
-  value: T | null,
-) {
-  if (typeof ref === 'function') {
-    ref(value)
-  } else if (ref) {
-    ref.current = value
-  }
-}
-
 AnchoredOverlay.displayName = 'AnchoredOverlay'
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index 3b5a2eecaaf..44db1cbd3fb 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -3,7 +3,7 @@ import React, {forwardRef, useEffect} from 'react'
 import {AlertIcon, InfoIcon, StopIcon, CheckCircleIcon, XIcon} from '@primer/octicons-react'
 import {Button, IconButton, type ButtonProps} from '../Button'
 import {VisuallyHidden} from '../VisuallyHidden'
-import {useMergedRefs} from '../internal/hooks/useMergedRefs'
+import {useMergedRefs} from '../hooks/useMergedRefs'
 import {useId} from '../hooks/useId'
 import classes from './Banner.module.css'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index eff345f616b..1dfe82dc0f4 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -1,8 +1,8 @@
-import React, {type PropsWithChildren} from 'react'
+import React, {useRef, type PropsWithChildren} from 'react'
 import classes from './ButtonGroup.module.css'
 import {clsx} from 'clsx'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
-import {useProvidedRefOrCreate} from '../hooks'
+import {useMergedRefs} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 export type ButtonGroupProps = PropsWithChildren<{
@@ -17,7 +17,8 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   forwardRef,
 ) {
   const buttons = React.Children.map(children, (child, index) => <div key={index}>{child}</div>)
-  const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement | null>)
+  const buttonRef = useRef<HTMLDivElement>(null)
+  const mergedRef = useMergedRefs(buttonRef, forwardRef)
 
   useFocusZone({
     containerRef: buttonRef,
@@ -27,8 +28,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   })
 
   return (
-    //@ts-expect-error it needs a non nullable ref
-    <BaseComponent ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
+    <BaseComponent ref={mergedRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
       {buttons}
     </BaseComponent>
   )
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
index c992f840ebb..8b0805b2def 100644
--- a/packages/react/src/Checkbox/Checkbox.tsx
+++ b/packages/react/src/Checkbox/Checkbox.tsx
@@ -1,6 +1,13 @@
 import {clsx} from 'clsx'
-import {useProvidedRefOrCreate} from '../hooks'
-import React, {useContext, useEffect, type ChangeEventHandler, type InputHTMLAttributes, type ReactElement} from 'react'
+import {useMergedRefs} from '../hooks'
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  type ChangeEventHandler,
+  type InputHTMLAttributes,
+  type ReactElement,
+} from 'react'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext'
@@ -45,7 +52,8 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     ref,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ): ReactElement<any> => {
-    const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
+    const checkboxRef = useRef<HTMLInputElement>(null)
+    const mergedRef = useMergedRefs(checkboxRef, ref)
     const checkboxGroupContext = useContext(CheckboxGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
       checkboxGroupContext.onChange && checkboxGroupContext.onChange(e)
@@ -54,7 +62,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const inputProps = {
       type: 'checkbox',
       disabled,
-      ref: checkboxRef,
+      ref: combinedRef,
       checked: indeterminate ? false : checked,
       defaultChecked,
       required,
@@ -84,7 +92,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false')
       }
     })
-    // @ts-expect-error inputProp needs a non nullable ref
+
     return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
   },
 )
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index c9135b2db31..2d512c41dfe 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -2,7 +2,7 @@ import React, {useEffect, type ComponentPropsWithoutRef, type ReactElement} from
 import {warning} from '../utils/warning'
 import {clsx} from 'clsx'
 import classes from './Details.module.css'
-import {useMergedRefs} from '../internal/hooks/useMergedRefs'
+import {useMergedRefs} from '../hooks/useMergedRefs'
 
 const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 4ef73390514..81cd3b21b23 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react'
 import type {ButtonProps} from '../Button'
 import {Button, IconButton} from '../Button'
-import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
+import {useOnEscapePress} from '../hooks'
 import {useFocusTrap} from '../hooks/useFocusTrap'
 import {XIcon} from '@primer/octicons-react'
 import {useFocusZone} from '../hooks/useFocusZone'
@@ -428,7 +428,8 @@ const Footer = React.forwardRef<HTMLDivElement, StyledFooterProps>(function Foot
 Footer.displayName = 'Dialog.Footer'
 
 const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>> = ({buttons}) => {
-  const autoFocusRef = useProvidedRefOrCreate<HTMLButtonElement>(buttons.find(button => button.autoFocus)?.ref)
+  const autoFocusRef = useRef<HTMLButtonElement>(null)
+  const mergedRef = useMergedRefs(autoFocusRef, buttons.find(button => button.autoFocus)?.ref)
   let autoFocusCount = 0
   const [hasRendered, setHasRendered] = useState(0)
   useEffect(() => {
@@ -450,8 +451,7 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
             {...buttonProps}
             // 'normal' value is equivalent to 'default', this is used for backwards compatibility
             variant={buttonType === 'normal' ? 'default' : buttonType}
-            // @ts-expect-error it needs a non nullable ref
-            ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
+            ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, combinedRef) : null}
           >
             {content}
           </Button>
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index 10afa57107c..94d4481599e 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -9,7 +9,6 @@ import {ActionList, type ActionListProps} from '../ActionList'
 import type {GroupedListProps, ListPropsBase, ItemInput, RenderItemFn} from './'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
-import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import useScrollFlash from '../hooks/useScrollFlash'
 import {VisuallyHidden} from '../VisuallyHidden'
@@ -22,6 +21,7 @@ import {isValidElementType} from 'react-is'
 import {useAnnouncements} from './useAnnouncements'
 import {clsx} from 'clsx'
 import {useVirtualizer} from '@tanstack/react-virtual'
+import {useMergedRefs} from '../hooks'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -189,10 +189,11 @@ export function FilteredActionList({
   const inputAndListContainerRef = useRef<HTMLDivElement>(null)
   const listRef = useRef<HTMLUListElement>(null)
 
-  const scrollContainerRef = useProvidedRefOrCreate<HTMLDivElement>(
-    providedScrollContainerRef as React.RefObject<HTMLDivElement>,
-  )
-  const inputRef = useProvidedRefOrCreate<HTMLInputElement>(providedInputRef)
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const combinedScrollContainerRef = useMergedRefs(scrollContainerRef, providedScrollContainerRef)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const combinedInputRef = useMergedRefs(inputRef, providedInputRef)
 
   const usingRovingTabindex = _PrivateFocusManagement === 'roving-tabindex'
   const [listContainerElement, setListContainerElement] = useState<HTMLUListElement | null>(null)
@@ -548,8 +549,7 @@ export function FilteredActionList({
     <div ref={inputAndListContainerRef} className={clsx(className, classes.Root)} data-testid="filtered-action-list">
       <div className={classes.Header}>
         <TextInput
-          // @ts-expect-error it needs a non nullable ref
-          ref={inputRef}
+          ref={combinedInputRef}
           block
           width="auto"
           color="fg.default"
@@ -585,8 +585,7 @@ export function FilteredActionList({
           </label>
         </div>
       )}
-      {/* @ts-expect-error div needs a non nullable ref */}
-      <div ref={scrollContainerRef} className={classes.Container}>
+      <div ref={combinedScrollContainerRef} className={classes.Container}>
         {getBodyContent()}
       </div>
     </div>
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 1acaadf06f3..fa3095f86aa 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React, {useEffect, useRef} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
 import Heading from '../Heading'
@@ -10,7 +10,7 @@ import {getResponsiveAttributes} from '../internal/utils/getResponsiveAttributes
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {areAllValuesTheSame, haveRegularAndWideSameValue} from '../utils/getBreakpointDeclarations'
 import {warning} from '../utils/warning'
-import {useProvidedRefOrCreate} from '../hooks'
+import {useMergedRefs} from '../hooks'
 import type {AriaRole, FCWithSlotMarker} from '../utils/types'
 import {clsx} from 'clsx'
 
@@ -49,7 +49,8 @@ export type PageHeaderProps = {
 
 const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeaderProps>>(
   ({children, className, as: BaseComponent = 'div', 'aria-label': ariaLabel, role, hasBorder}, forwardedRef) => {
-    const rootRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
+    const rootRef = useRef<HTMLDivElement>(null)
+    const mergedRef = useMergedRefs(rootRef, forwardedRef)
 
     const isInteractive = (element: HTMLElement) => {
       return (
@@ -105,7 +106,7 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
 
     return (
       <BaseComponent
-        ref={rootRef}
+        ref={mergedRef}
         className={clsx(classes.PageHeader, className)}
         data-has-border={hasBorder ? 'true' : undefined}
         aria-label={ariaLabel}
@@ -205,12 +206,10 @@ export type TitleAreaProps = {
 
 const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<TitleAreaProps>>(
   ({children, className, hidden = false, variant = 'medium'}, forwardedRef) => {
-    const titleAreaRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
     return (
       <div
         className={clsx(classes.TitleArea, className)}
-        // @ts-expect-error it needs a non nullable ref
-        ref={titleAreaRef}
+        ref={forwardedRef}
         data-component="TitleArea"
         {...getResponsiveAttributes('size-variant', variant)}
         {...getHiddenDataAttributes(hidden)}
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 82cd0812d1b..d7dc81420a1 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -12,7 +12,7 @@ import type {ItemProps, ItemInput} from './'
 import {SelectPanelMessage} from './SelectPanelMessage'
 
 import {Button, IconButton, LinkButton} from '../Button'
-import {useProvidedRefOrCreate} from '../hooks'
+import {useMergedRefs} from '../hooks'
 import type {FocusZoneHookSettings} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
@@ -513,7 +513,9 @@ function Panel({
     }
   }, [notice, open])
 
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  const anchorRef = useRef<HTMLElement>(null)
+  const combinedAnchorRef = useMergedRefs(anchorRef, externalAnchorRef)
+
   const onOpen: AnchoredOverlayProps['onOpen'] = useCallback(
     (gesture: Parameters<Exclude<AnchoredOverlayProps['onOpen'], undefined>>[0]) => onOpenChange(true, gesture),
     [onOpenChange],
@@ -860,7 +862,7 @@ function Panel({
     <>
       <AnchoredOverlay
         renderAnchor={renderMenuAnchor}
-        anchorRef={anchorRef}
+        anchorRef={combinedAnchorRef}
         align={align}
         open={open}
         onOpen={onOpen}
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 88a4c716226..eaba650e882 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -7,7 +7,6 @@ import {AlertFillIcon} from '@primer/octicons-react'
 
 import classes from './TextInput.module.css'
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
-import {useProvidedRefOrCreate} from '../hooks'
 import type {Merge} from '../utils/types'
 import type {StyledWrapperProps} from '../internal/components/TextInputWrapper'
 import TextInputWrapper from '../internal/components/TextInputWrapper'
@@ -16,6 +15,7 @@ import UnstyledTextInput from '../internal/components/UnstyledTextInput'
 import VisuallyHidden from '../_VisuallyHidden'
 import {CharacterCounter} from '../utils/character-counter'
 import Text from '../Text'
+import {useMergedRefs} from '../hooks'
 
 export type TextInputNonPassthroughProps = {
   /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
@@ -103,7 +103,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     ref,
   ) => {
     const [isInputFocused, setIsInputFocused] = useState<boolean>(false)
-    const inputRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement | null>)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const mergedRef = useMergedRefs(inputRef, ref)
     const [characterCount, setCharacterCount] = useState<string>('')
     const [isOverLimit, setIsOverLimit] = useState<boolean>(false)
     const [screenReaderMessage, setScreenReaderMessage] = useState<string>('')
@@ -258,8 +259,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
             {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
           </TextInputInnerVisualSlot>
           <UnstyledTextInput
-            // @ts-expect-error it needs a non nullable ref
-            ref={inputRef}
+            ref={mergedRef}
             disabled={disabled}
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index bd33f49c562..d0bac5e36c1 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -1,5 +1,5 @@
-import React, {Children, useEffect, useRef, useState, useMemo, type ForwardRefExoticComponent} from 'react'
-import {useId, useProvidedRefOrCreate, useOnEscapePress, useIsMacOS} from '../hooks'
+import React, {Children, useEffect, useState, useMemo, type ForwardRefExoticComponent, useRef} from 'react'
+import {useId, useOnEscapePress, useIsMacOS, useMergedRefs} from '../hooks'
 import {invariant} from '../utils/invariant'
 import {warning} from '../utils/warning'
 import {getAnchoredPosition} from '@primer/behaviors'
@@ -50,7 +50,7 @@ type TriggerPropsType = Pick<
   | 'onTouchCancel'
   | 'onTouchEnd'
 > & {
-  ref?: React.RefObject<HTMLElement>
+  ref?: React.Ref<HTMLElement>
 }
 
 // map tooltip direction to anchoredPosition props
@@ -124,7 +124,8 @@ export const Tooltip: ForwardRefExoticComponent<
   ) => {
     const tooltipId = useId(id)
     const child = Children.only(children)
-    const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement>)
+    const triggerRef = useRef<HTMLElement>(null)
+    const combinedTriggerRef = useMergedRefs(triggerRef, forwardedRef)
     const tooltipElRef = useRef<HTMLDivElement>(null)
 
     const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)
@@ -279,8 +280,7 @@ export const Tooltip: ForwardRefExoticComponent<
           {React.isValidElement(child) &&
             // eslint-disable-next-line react-hooks/refs
             React.cloneElement(child as React.ReactElement<TriggerPropsType>, {
-              // @ts-expect-error it needs a non nullable ref
-              ref: triggerRef,
+              ref: combinedTriggerRef,
               // If it is a type description, we use tooltip to describe the trigger
               'aria-describedby': (() => {
                 // If tooltip is not a description type, keep the original aria-describedby
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 77f3b55f2a2..cec11bdd137 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -218,6 +218,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "useFormControlForwardedProps",
   "useId",
   "useIsomorphicLayoutEffect",
+  "useMergedRefs",
   "useOnEscapePress",
   "useOnOutsideClick",
   "useOpenAndCloseFocus",
diff --git a/packages/react/src/deprecated/ActionMenu.tsx b/packages/react/src/deprecated/ActionMenu.tsx
index fa0cf1de949..65343d1318b 100644
--- a/packages/react/src/deprecated/ActionMenu.tsx
+++ b/packages/react/src/deprecated/ActionMenu.tsx
@@ -6,11 +6,11 @@ import {Divider} from './ActionList/Divider'
 import type {ButtonProps} from '../Button'
 import {Button} from '../Button'
 import type React from 'react'
-import {useCallback, useMemo, type JSX} from 'react'
+import {useCallback, useMemo, useRef, type JSX} from 'react'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import type {OverlayProps} from '../Overlay'
-import {useProvidedRefOrCreate} from '../hooks'
+import {useMergedRefs} from '../hooks'
 import type {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
 
 interface ActionMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
@@ -60,7 +60,8 @@ const ActionMenuBase = ({
   ...listProps
 }: ActionMenuProps): JSX.Element => {
   const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, setOpen, false)
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  const anchorRef = useRef<HTMLElement>(null)
+  const mergedRef = useMergedRefs(anchorRef, externalAnchorRef)
   const onOpen = useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
   const onClose = useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
 
@@ -96,7 +97,7 @@ const ActionMenuBase = ({
   return (
     <AnchoredOverlay
       renderAnchor={renderMenuAnchor}
-      anchorRef={anchorRef}
+      anchorref={mergedRef}
       open={combinedOpenState}
       onOpen={onOpen}
       onClose={onClose}
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index 3e61548d52b..e7bb7b8ffc7 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState, type MutableRefObject} from 'react'
+import React, {useEffect, useRef, useState, type MutableRefObject} from 'react'
 import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLeftIcon} from '@primer/octicons-react'
 
 import type {ButtonProps, TextInputProps, ActionListProps, LinkProps, CheckboxProps} from '../../index'
@@ -15,7 +15,7 @@ import {
 import Octicon from '../../Octicon'
 import {ActionListContainerContext} from '../../ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
-import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
+import {useId, useAnchoredPosition, useMergedRefs} from '../../hooks'
 import type {OverlayProps} from '../../Overlay/Overlay'
 import {BaseOverlay, heightMap} from '../../Overlay/Overlay'
 import {InputLabel} from '../../internal/components/InputLabel'
@@ -118,7 +118,9 @@ const Panel: React.FC<SelectPanelProps> = ({
   // with additional props for accessibility
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let Anchor: React.ReactElement<any> | undefined
-  const anchorRef = useProvidedRefOrCreate(providedAnchorRef)
+
+  const anchorRef = useRef<HTMLButtonElement>(null)
+  const mergedRef = useMergedRefs(providedAnchorRef, anchorRef)
 
   const onAnchorClick = () => {
     if (!internalOpen) setInternalOpen(true)
@@ -130,7 +132,7 @@ const Panel: React.FC<SelectPanelProps> = ({
       // eslint-disable-next-line react-hooks/immutability
       Anchor = React.cloneElement(child, {
         // @ts-ignore TODO
-        ref: anchorRef,
+        ref: combinedRef,
         onClick: child.props.onClick || onAnchorClick,
         'aria-haspopup': true,
         'aria-expanded': internalOpen,
diff --git a/packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx b/packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx
index ebe9a81a5aa..df2d7a518e4 100644
--- a/packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx
+++ b/packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx
@@ -17,7 +17,6 @@ const CustomTabList = (props: React.PropsWithChildren) => {
 
   return (
     <div style={{width: '200px'}}>
-      {/* @ts-expect-error it needs a non nullable ref */}
       <ActionList {...tabListProps}>{props.children}</ActionList>
     </div>
   )
diff --git a/packages/react/src/experimental/Tabs/Tabs.tsx b/packages/react/src/experimental/Tabs/Tabs.tsx
index 69c891b5350..ad171ea4c41 100644
--- a/packages/react/src/experimental/Tabs/Tabs.tsx
+++ b/packages/react/src/experimental/Tabs/Tabs.tsx
@@ -3,13 +3,14 @@ import React, {
   useContext,
   useId,
   useMemo,
+  useRef,
   type AriaAttributes,
   type ElementRef,
   type PropsWithChildren,
 } from 'react'
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 import {useControllableState} from '../../hooks/useControllableState'
-import {useProvidedRefOrCreate} from '../../hooks'
+import {useMergedRefs} from '../../hooks'
 
 /**
  * Props to be used when the Tabs component's state is controlled by the parent
@@ -114,13 +115,14 @@ function useTabList<T extends HTMLElement>(
     'aria-orientation': AriaAttributes['aria-orientation']
     'aria-label': AriaAttributes['aria-label']
     'aria-labelledby': AriaAttributes['aria-labelledby']
-    ref: React.RefObject<T | null>
+    ref: React.Ref<T>
     role: 'tablist'
   }
 } {
   const {'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-orientation': ariaOrientation} = props
 
-  const ref = useProvidedRefOrCreate(props.ref)
+  const ref = useRef<T>(null)
+  const mergedRef = useMergedRefs(ref, props.ref)
 
   const onKeyDown = (event: React.KeyboardEvent) => {
     const {current: tablist} = ref
@@ -172,7 +174,7 @@ function useTabList<T extends HTMLElement>(
 
   return {
     tabListProps: {
-      ref,
+      ref: combinedRef,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
       'aria-orientation': ariaOrientation ?? 'horizontal',
@@ -186,7 +188,6 @@ function TabList({children, ...rest}: TabListProps) {
   const {tabListProps} = useTabList<HTMLDivElement>(rest)
 
   return (
-    // @ts-expect-error it needs a non nullable ref
     <div {...rest} {...tabListProps}>
       {children}
     </div>
diff --git a/packages/react/src/hooks/__tests__/useMergedRefs.test.tsx b/packages/react/src/hooks/__tests__/useMergedRefs.test.tsx
new file mode 100644
index 00000000000..43ef7f8d706
--- /dev/null
+++ b/packages/react/src/hooks/__tests__/useMergedRefs.test.tsx
@@ -0,0 +1,153 @@
+import {render, renderHook} from '@testing-library/react'
+import React, {forwardRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
+import {useMergedRefs} from '../useMergedRefs'
+
+type InputOrButtonRef = RefObject<HTMLInputElement & HTMLButtonElement>
+
+const Component = forwardRef<HTMLInputElement & HTMLButtonElement, {asButton?: boolean}>(({asButton}, forwardedRef) => {
+  const ref: InputOrButtonRef = React.useRef(null)
+
+  const mergedRef = useMergedRefs(forwardedRef, ref)
+
+  return asButton ? <button type="button" ref={mergedRef} /> : <input ref={mergedRef} />
+})
+
+describe('useMergedRefs', () => {
+  describe('combining a forwarded ref with an internal ref', () => {
+    describe('object refs', () => {
+      it('forwards the ref to the underlying element', async () => {
+        const ref: InputOrButtonRef = {current: null}
+
+        render(<Component ref={ref} />)
+
+        expect(ref.current).toBeInstanceOf(HTMLInputElement)
+      })
+
+      it('avoids dangling references by clearing the ref on unmount', () => {
+        const ref: InputOrButtonRef = {current: null}
+
+        const {unmount} = render(<Component ref={ref} />)
+
+        expect(ref.current).toBeInstanceOf(HTMLInputElement)
+
+        unmount()
+
+        expect(ref.current).toBeNull()
+      })
+
+      it('updates the ref if the target changes', () => {
+        const ref: InputOrButtonRef = {current: null}
+
+        const {rerender} = render(<Component ref={ref} />)
+
+        expect(ref.current).toBeInstanceOf(HTMLInputElement)
+
+        rerender(<Component ref={ref} asButton />)
+
+        expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+      })
+
+      it('is correctly set during an initial effect', () => {
+        // This can break if the hook delays setting the initial value until a subsequent render
+
+        const ComponentWithEffect = () => {
+          const ref = React.useRef<HTMLInputElement & HTMLButtonElement>(null)
+
+          React.useEffect(() => {
+            expect(ref.current).toBeInstanceOf(HTMLInputElement)
+          }, [])
+
+          return <Component ref={ref} />
+        }
+
+        render(<ComponentWithEffect />)
+      })
+    })
+
+    describe('callback refs', () => {
+      it('calls the ref on mount and unmount', async () => {
+        const ref = vi.fn()
+
+        const {unmount} = render(<Component ref={ref} />)
+
+        expect(ref).toHaveBeenCalledWith(expect.any(HTMLInputElement))
+
+        unmount()
+
+        expect(ref).toHaveBeenCalledWith(null)
+      })
+
+      it('calls the ref if the target changes', () => {
+        const ref = vi.fn()
+
+        const {rerender} = render(<Component ref={ref} />)
+
+        expect(ref).toHaveBeenCalledWith(expect.any(HTMLInputElement))
+
+        rerender(<Component ref={ref} asButton />)
+
+        expect(ref).toHaveBeenCalledWith(expect.any(HTMLButtonElement))
+      })
+
+      it('does not call the ref on re-render if the target does not change', () => {
+        const ref = vi.fn()
+
+        const {rerender} = render(<Component ref={ref} />)
+
+        rerender(<Component ref={ref} />)
+
+        expect(ref).toHaveBeenCalledExactlyOnceWith(expect.any(HTMLInputElement))
+      })
+    })
+  })
+
+  describe('combining two callback refs', () => {
+    it('calls both refs when the combined ref is called', () => {
+      const refA = vi.fn()
+      const refB = vi.fn()
+
+      const combined = renderHook(() => useMergedRefs(refA, refB))
+
+      combined.result.current('test')
+      expect(refA).toHaveBeenCalledExactlyOnceWith('test')
+      expect(refB).toHaveBeenCalledExactlyOnceWith('test')
+    })
+
+    it('handles React 18 null values correctly', () => {
+      const refA = vi.fn()
+      const refB = vi.fn()
+
+      const combined = renderHook(() => useMergedRefs(refA, refB))
+
+      combined.result.current('test')
+      expect(refA).toHaveBeenCalledWith('test')
+      expect(refB).toHaveBeenCalledWith('test')
+
+      // on React 18, cleanup fn will be ignored and ref will be called with null
+      combined.result.current(null)
+
+      expect(refA).toHaveBeenCalledWith(null)
+      expect(refB).toHaveBeenCalledWith(null)
+    })
+
+    it('handles React 19 cleanup functions correctly and independently', () => {
+      const refA = vi.fn()
+      const cleanupRefB = vi.fn()
+      const refB = vi.fn().mockReturnValue(cleanupRefB)
+
+      const combined = renderHook(() => useMergedRefs(refA, refB))
+
+      const cleanup = combined.result.current('test')
+      expect(refA).toHaveBeenCalledWith('test')
+      expect(refB).toHaveBeenCalledWith('test')
+
+      // React 19 will call cleanup function and not pass null
+      cleanup()
+
+      expect(refA).toHaveBeenCalledWith(null)
+      expect(refB).not.toHaveBeenCalledWith(null)
+      expect(cleanupRefB).toHaveBeenCalledOnce()
+    })
+  })
+})
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
index d8259f5fd96..5938cacc2c0 100644
--- a/packages/react/src/hooks/index.ts
+++ b/packages/react/src/hooks/index.ts
@@ -16,3 +16,4 @@ export {useMnemonics} from './useMnemonics'
 export {useRefObjectAsForwardedRef} from './useRefObjectAsForwardedRef'
 export {useId} from './useId'
 export {useIsMacOS} from './useIsMacOS'
+export {useMergedRefs} from './useMergedRefs'
diff --git a/packages/react/src/hooks/useAnchoredPosition.ts b/packages/react/src/hooks/useAnchoredPosition.ts
index 32777aad1d7..b86e6f5ebdb 100644
--- a/packages/react/src/hooks/useAnchoredPosition.ts
+++ b/packages/react/src/hooks/useAnchoredPosition.ts
@@ -1,9 +1,9 @@
 import React from 'react'
 import {getAnchoredPosition} from '@primer/behaviors'
 import type {AnchorPosition, PositionSettings} from '@primer/behaviors'
-import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 import {useResizeObserver} from './useResizeObserver'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
   floatingElementRef?: React.RefObject<Element | null>
diff --git a/packages/react/src/hooks/useFocusTrap.ts b/packages/react/src/hooks/useFocusTrap.ts
index 70b80072d51..ed09cb36f8b 100644
--- a/packages/react/src/hooks/useFocusTrap.ts
+++ b/packages/react/src/hooks/useFocusTrap.ts
@@ -1,7 +1,7 @@
 import React from 'react'
 import {focusTrap} from '@primer/behaviors'
-import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 import {useOnOutsideClick} from './useOnOutsideClick'
+import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 
 export interface FocusTrapHookSettings {
   /**
@@ -53,8 +53,10 @@ export function useFocusTrap(
   dependencies: React.DependencyList = [],
 ): {containerRef: React.RefObject<HTMLElement | null>; initialFocusRef: React.RefObject<HTMLElement | null>} {
   const [outsideClicked, setOutsideClicked] = React.useState(false)
+
   const containerRef = useProvidedRefOrCreate(settings?.containerRef)
   const initialFocusRef = useProvidedRefOrCreate(settings?.initialFocusRef)
+
   const disabled = settings?.disabled
   const abortController = React.useRef<AbortController>()
   const previousFocusedElement = React.useRef<Element | null>(null)
diff --git a/packages/react/src/hooks/useMergedRefs.hookDocs.json b/packages/react/src/hooks/useMergedRefs.hookDocs.json
new file mode 100644
index 00000000000..840bfa50598
--- /dev/null
+++ b/packages/react/src/hooks/useMergedRefs.hookDocs.json
@@ -0,0 +1,22 @@
+{
+  "name": "useMergedRefs",
+  "importPath": "@primer/react",
+  "stories": [],
+  "parameters": [
+    {
+      "name": "refA",
+      "type": "Ref<T>",
+      "required": true,
+      "description": "First ref to combine."
+    },
+    {
+      "name": "refB",
+      "type": "Ref<T>",
+      "required": true,
+      "description": "Second ref to combine."
+    }
+  ],
+  "returns": {
+    "type": "RefCallback<T>"
+  }
+}
diff --git a/packages/react/src/hooks/useMergedRefs.ts b/packages/react/src/hooks/useMergedRefs.ts
new file mode 100644
index 00000000000..a80b63f8e72
--- /dev/null
+++ b/packages/react/src/hooks/useMergedRefs.ts
@@ -0,0 +1,85 @@
+import type {ForwardedRef, Ref as StandardRef, MutableRefObject} from 'react'
+import {useCallback} from 'react'
+
+/**
+ * Combine two refs of matching type (typically an external or forwarded ref and an internal `useRef` object or
+ * callback ref).
+ *
+ * If you need to combine more than two refs (what are you doing?) just nest the hook:
+ * `useMergedRefs(refA, useMergedRefs(refB, refC))`
+ *
+ * @param refA First ref to merge. The order is not important.
+ * @param refB Second ref to merge. The order is not important.
+ * @returns A new ref which must be passed to the relevant child component. **Important**: do not pass `refA` or
+ * `refB` to the component!
+ *
+ * @example
+ * // React 18
+ * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
+ *  const ref = useRef<HTMLButtonElement>(null)
+ *  const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ *  return <button ref={mergedRef} />
+ * })
+ *
+ * @example
+ * // React 19
+ * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
+ *  const ref = useRef<HTMLButtonElement>(null)
+ *  const mergedRef = useMergedRefs(externalRef, ref)
+ *
+ *  return <button ref={mergedRef} />
+ * }
+ */
+export function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>) {
+  return useCallback(
+    (value: T | null) => {
+      const cleanupA = setRef(refA, value)
+      const cleanupB = setRef(refB, value)
+
+      // Only works in React 19. In React 18, the cleanup function will be ignored and the ref will get called with
+      // `null` which will be passed to each ref as expected.
+      return () => {
+        // For object refs and callback refs that don't return cleanups, we still need to pass `null` on cleanup
+        if (cleanupA) cleanupA()
+        else setRef(refA, null)
+
+        if (cleanupB) cleanupB()
+        else setRef(refB, null)
+      }
+    },
+    [refA, refB],
+  )
+}
+
+type CleanupFunction = () => void
+
+/**
+ * React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the
+ * cleanup is called on unmount **instead** of setting the ref to null.
+ */
+// bivarianceHack copied from React types
+type React19RefCallback<T> = {
+  bivarianceHack(instance: T): void | CleanupFunction
+}['bivarianceHack']
+
+/**
+ * Supporting React 18 and 19 while alleviating the need for any hacks or casts in consumers:
+ * - `ForwardedRef` from the React 18 `forwardRef` HOC
+ * - `React19RefCallback` for callback refs that can return a cleanup function (this is included in `Ref` in React 19
+ *   but not in 18)
+ * - `Ref` for standard refs from `useRef` or passed in as React 19 prop
+ * - `undefined` to allow for easy use of optional `ref` props in React 19
+ */
+type Ref<T> = ForwardedRef<T> | React19RefCallback<T> | StandardRef<T> | undefined
+
+function setRef<T>(ref: Ref<T>, value: T) {
+  if (typeof ref === 'function') {
+    return ref(value)
+  } else if (ref) {
+    // `React.Ref` is typed as immutable to protect consumers but it's OK to mutate it here. We could just change the
+    // type to only accept mutable refs, but then it would be harder to accept refs as props in React 19 because we
+    // would have to use the `React.ForwardedRef` type instead of `React.Ref`
+    ;(ref as MutableRefObject<T>).current = value
+  }
+}
diff --git a/packages/react/src/hooks/useProvidedRefOrCreate.ts b/packages/react/src/hooks/useProvidedRefOrCreate.ts
index bfd209cbde2..bec68d8dabd 100644
--- a/packages/react/src/hooks/useProvidedRefOrCreate.ts
+++ b/packages/react/src/hooks/useProvidedRefOrCreate.ts
@@ -7,6 +7,18 @@ import React from 'react'
  * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
  * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
  * @type TRef The type of the RefObject which should be created.
+ *
+ * @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
+ * created ref instead.
+ *
+ * ```diff
+ * - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
+ * + const ref = useRef(null)
+ * + const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ * - return <div ref={ref} />
+ * + return <div ref={mergedRef} />
+ * ```
  */
 export function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null> {
   const createdRef = React.useRef<TRef>(null)
diff --git a/packages/react/src/hooks/useRefObjectAsForwardedRef.ts b/packages/react/src/hooks/useRefObjectAsForwardedRef.ts
index 11becf147d7..0067228a7c6 100644
--- a/packages/react/src/hooks/useRefObjectAsForwardedRef.ts
+++ b/packages/react/src/hooks/useRefObjectAsForwardedRef.ts
@@ -7,6 +7,18 @@ import {useImperativeHandle} from 'react'
  * instance with `.current`.
  *
  * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
+ *
+ * @deprecated Migrate to `useMergedRefs`. It's safer, faster, and easier to use:
+ *
+ * ```diff
+ *   const ref = useRef(null)
+ *
+ * - useRefObjectAsForwardedRef(forwardedRef, ref)
+ * + const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ * - return <div ref={ref} />
+ * + return <div ref={mergedRef} />
+ * ```
  */
 export function useRefObjectAsForwardedRef<T>(forwardedRef: ForwardedRef<T>, refObject: RefObject<T | null>): void {
   useImperativeHandle<T | null, T | null>(forwardedRef, () => refObject.current)
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 66c8d438e12..81c0fae44ad 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -39,6 +39,7 @@ export type {FocusTrapHookSettings} from './hooks/useFocusTrap'
 export {useFocusZone} from './hooks/useFocusZone'
 export type {FocusZoneHookSettings} from './hooks/useFocusZone'
 export {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef'
+export {useMergedRefs} from './hooks/useMergedRefs'
 export {useResizeObserver} from './hooks/useResizeObserver'
 export {useResponsiveValue, type ResponsiveValue} from './hooks/useResponsiveValue'
 export {default as useIsomorphicLayoutEffect} from './utils/useIsomorphicLayoutEffect'
diff --git a/packages/react/src/internal/hooks/useMergedRefs.ts b/packages/react/src/internal/hooks/useMergedRefs.ts
deleted file mode 100644
index 7c67f20fadc..00000000000
--- a/packages/react/src/internal/hooks/useMergedRefs.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {useCallback} from 'react'
-
-export function useMergedRefs<T>(
-  ...refs: Array<React.MutableRefObject<T> | React.ForwardedRef<T> | React.RefCallback<T>>
-): React.RefCallback<T> {
-  return useCallback((instance: T) => {
-    for (const ref of refs) {
-      if (typeof ref === 'function') {
-        ref(instance)
-      } else if (ref) {
-        ref.current = instance
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs)
-}