diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index b93baee5bb7..823534b70fe 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -202,12 +202,14 @@ let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
       props
     );
 
+    let mergedRef = useMergedRef(forwardedRef, ref)
+
     return (
       <>
         <RouterNavLink
           {...props}
           {...prefetchHandlers}
-          ref={mergeRefs(forwardedRef, ref)}
+          ref={mergedRef}
           to={to}
         />
         {shouldPrefetch && !isAbsolute ? (
@@ -236,12 +238,14 @@ let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
       props
     );
 
+    let mergedRef = useMergedRef(forwardedRef, ref)
+
     return (
       <>
         <RouterLink
           {...props}
           {...prefetchHandlers}
-          ref={mergeRefs(forwardedRef, ref)}
+          ref={mergedRef}
           to={to}
         />
         {shouldPrefetch && !isAbsolute ? (
@@ -1213,3 +1217,12 @@ function mergeRefs<T = any>(
     });
   };
 }
+
+function useMergedRef<T = any>(
+  ...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  let rs = refs.filter((r): r is React.Ref<T> => !!r);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useCallback(mergeRefs(...rs), rs);
+}