diff --git a/packages/compose/README.md b/packages/compose/README.md
index 1a46e8fb19bf4..6092aa98a0a09 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -350,11 +350,11 @@ return
;
_Parameters_
-- _refs_ `Array`: The refs to be merged.
+- _refs_ `Array`: The refs to be merged.
_Returns_
-- `RefCallback`: The merged ref callback.
+- `import('react').RefCallback>`: The merged ref callback.
# **usePrevious**
diff --git a/packages/compose/src/hooks/use-merge-refs/index.js b/packages/compose/src/hooks/use-merge-refs/index.js
index d9bd7e6ce4e1e..5b8b353a3b680 100644
--- a/packages/compose/src/hooks/use-merge-refs/index.js
+++ b/packages/compose/src/hooks/use-merge-refs/index.js
@@ -3,14 +3,25 @@
*/
import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
-/** @typedef {import('@wordpress/element').RefCallback} RefCallback */
+/* eslint-disable jsdoc/valid-types */
+/**
+ * @template T
+ * @typedef {T extends import('react').Ref ? R : never} TypeFromRef
+ */
+/* eslint-enable jsdoc/valid-types */
+/**
+ * @template T
+ * @param {import('react').Ref} ref
+ * @param {T} value
+ */
function assignRef( ref, value ) {
if ( typeof ref === 'function' ) {
ref( value );
} else if ( ref && ref.hasOwnProperty( 'current' ) ) {
- ref.current = value;
+ /* eslint-disable jsdoc/no-undefined-types */
+ /** @type {import('react').MutableRefObject} */ ( ref ).current = value;
+ /* eslint-enable jsdoc/no-undefined-types */
}
}
@@ -52,13 +63,17 @@ function assignRef( ref, value ) {
* return ;
* ```
*
- * @param {Array} refs The refs to be merged.
+ * @template {import('react').Ref} TRef
+ * @param {Array} refs The refs to be merged.
*
- * @return {RefCallback} The merged ref callback.
+ * @return {import('react').RefCallback>} The merged ref callback.
*/
export default function useMergeRefs( refs ) {
const element = useRef();
const didElementChange = useRef( false );
+ /* eslint-disable jsdoc/no-undefined-types */
+ /** @type {import('react').MutableRefObject} */
+ /* eslint-enable jsdoc/no-undefined-types */
const previousRefs = useRef( [] );
const currentRefs = useRef( refs );
diff --git a/packages/compose/tsconfig.json b/packages/compose/tsconfig.json
index 6adf71ba46430..e2db3de66affc 100644
--- a/packages/compose/tsconfig.json
+++ b/packages/compose/tsconfig.json
@@ -23,6 +23,7 @@
"src/hooks/use-previous/**/*",
"src/hooks/use-media-query/**/*",
"src/hooks/use-reduced-motion/**/*",
+ "src/hooks/use-merge-refs/**/*",
"src/utils/**/*"
]
}