This is how I like to use useImperativeHandle to "sync" or compose refs in React

useImperativeHandle_to_sync_refs.js

import React, { useImperativeHandle, useRef, forwardRef, useCallback, useEffect } from 'react'

export const Component = forwardRef(({ callbackRef }, externalRef) => {
  const internalRef = useRef()

  // use imperative handle lets you "sync" any number of external refs with the value of the internalRef
  useImperativeHandle(externalRef, () => internalRef.current)
  useImperativeHandle(callbackRef, () => internalRef.current)

  useEffect(() => {
    console.log("This is the internalRef", internalRef)
  }, [])

  // for this to work, you have to bind the internalRef to the actual dom
  return <div ref={internalRef}>This actually works</div>
})

// Usage
export default function App () {
  const externalRef = useRef()

  // Even works with callback refs
  const callbackRef = useCallback((node) => console.log("This is the callback ref", node), [])
  
  useEffect(() => {
    console.log("This is the externalRef", externalRef)
  }, [])
  
  return <Component ref={externalRef} callbackRef={callbackRef}/>
}

Console output:

This is the callback ref <div>​This actually works​</div>​
This is the internalRef {current: div}
This is the externalRef {current: div}

Amazing

Credit to @matthewmatician who originally showed me this method.