Как в react передавать фокус от 1 инпута к другому?

function App() {
  const [ values, setValues ] = useState(Array(10).fill(''));

  const onChange = ({ target: t }) => {
    const index = +t.dataset.index;
    const value = t.value;

    setValues(values.map((n, i) => i === index ? value : n));

    if (index < values.length - 1 && value) {
      inputRefs.current[index + 1].focus();
      inputRefs.current[index + 1].select();
    }
  };

  const inputRefs = useRef([]);

  return (
    <div>
      {values.map((n, i) => (
        <div>
          <input
            value={n}
            data-index={i}
            onChange={onChange}
            ref={input => inputRefs.current[i] = input}
            maxLength="1"
          />
        </div>
      ))}
    </div>
  );
}