listeners.jsx

const ComponentA = (props, ref) => {
  <div ref={ref}>a</div>
}

const ComponentB = (props, ref) => {
  <ComponentA ref={ref} />
}

const ComponentC = () => {
  const bRef = React.createRef()
  
  const handler = (e) => { 
    // do something 
  }
  
  onKeyDown({
    handler,
    scope: bRef
  })

  <>
    <ComponentB ref={bRef} /> // passing ref deep down
    <div onKeyDown={handler}) /> // already has context, just use onKeyDown
  </>
}