Component with an internal ref that syncs with a ref received br arguments

ComponentWithInternalRef.tsx

import {forwardRef, ForwardRefRenderFunction, MutableRefObject, useRef} from 'react'

const _ComponentWithInternalRef: ForwardRefRenderFunction<HTMLDivElement> = (props, ref) => {
  const internalRef: MutableRefObject<HTMLDivElement | null> = useRef(null)

  const internalCallbackRef = (element: HTMLDivElement | null) => {
    internalRef.current = element

    if (!ref) return

    if (typeof ref === 'function') {
      ref(element)
    } else {
      ref.current = element
    }
  }

  return <div ref={internalCallbackRef} />
}

export const ComponentWithInternalRef = forwardRef(_ComponentWithInternalRef)