Unblock React Compiler for 4 components with deferred ref access (#11549)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/lib/hooks/useDraggableScrollView.ts

@@ -74,8 +74,13 @@ export function useDraggableScroll<
     }
   }, [cursor])
 
+  /*
+   * Deferred into the callback so the merge does not happen during the render of
+   * whichever component uses this hook - see SearchInput for the full reasoning.
+   */
   const refs = useMemo(
-    () => mergeRefs(outerRef ? [ref, outerRef] : [ref]),
+    () => (node: Scrollable | null) =>
+      mergeRefs(outerRef ? [ref, outerRef] : [ref])(node),
     [ref, outerRef],
   )
 

src/lib/merge-refs.ts

@@ -31,7 +31,7 @@ function assignRef<T>(
  * @returns The function `mergeRefs` is being returned. It takes an array of mutable or legacy refs and
  * returns a ref callback function that can be used to merge multiple refs into a single ref.
  */
-export function mergeRefs<T>(refs: (Ref<T> | undefined)[]): Ref<T> {
+export function mergeRefs<T>(refs: (Ref<T> | undefined)[]): RefCallback<T> {
   return (value: T | null) => {
     const cleanups: (() => void)[] = []