How to trigger focus event programatically in Reactjs

Question

I'm trying to trigger focus event programatically:

import { useRef } from "react";
import "./styles.css";

export default function App() {
  const ref = useRef();

  function focusTrig() {
    ref.current.focus();
  }
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button onClick={focusTrig}>Focus trigger</button>

      <div ref={ref} onFocus={() => console.log("FOCUSED!")}>
        Focus Target
      </div>
    </div>
  );
}

demo

The console.log binded with the onFocus event never run. Why?

UPDATE If I turn the target element from DIV to INPUT, the the console.log get run. But this openly conflicts with the official documentation, that states:

These focus events work on all elements in the React DOM, not just form elements.

ReactJS 17 DOC

Answer 1

Add tabIndex to the div element which indicates that it can be focused

<div tabIndex="0" ref={ref} onFocus={() => {console.log("FOCUSED!")}}>
        Focus Target
      </div>