React: Use forwardRef with useRef

useOuterRef.ts

import { ForwardedRef, MutableRefObject, useEffect, useRef } from 'react'

function useOuterRef(outerRef: ForwardedRef<HTMLElement | null>): MutableRefObject<HTMLElement | null> {
  const innerRef = useRef<HTMLElement | null>(null)

  useEffect(() => {
		if (!outerRef) return

		if (typeof outerRef === 'function') {
			outerRef(innerRef.current)
		} else {
			outerRef.current = innerRef.current
		}
  }, [outerRef])

  return innerRef
}