How to Focus the Next Input with React

React Enter to Next Focus

export function App(props) {
  const firstNameRef = useRef(null)
  const lastNameRef = useRef(null)

// Let’s create a function which will help us to control focus in input  
const changeInputFocus = (event, nextInputRef) => {
    event.preventDefault()

// We can use key name on which we need to perform logic
    if (event.key === 'Tab' || event.key === 'Enter') {
      nextInputRef.current.focus();
    }
  };

  return (
    <div className='App'>
        <label>First name </label>
        <input 
          ref={firstNameRef} 
          type='text' 
          onKeyDown={(event) => changeInputFocus(event, lastNameRef)} />
        <label>Last name </label>
        <input ref={lastNameRef} type='text' />
      </div >
  );
}