useFocusNextOnEnter.js

import { useEffect, useRef } from "react"

export default function useFocusNextOnEnter() {
  const formRef = useRef()

  const isForm = node => Boolean(node.nodeName === "FORM")

  const handleKeyPress = e => {
    if (e.key === "Enter" || e.keyCode === 13) {
      const form = e.target.form
      const index = [].indexOf.call(form, e.target)
      if (form.elements[index + 1] && form.elements[index + 1].getAttribute("type") !== "submit") {
        form.elements[index + 1].focus()
        e.preventDefault()
      }
    }
  }

  useEffect(() => {
    if (formRef.current && isForm(formRef.current)) {
      formRef.current.addEventListener("keypress", handleKeyPress)

      return formRef.current.removeEventListener("keyPress", handleKeyPress)
    }
    console.error("Invalid call: Component using 'useFocusNextOnEnter' hook must be a form element")
  }, [])
  return formRef
}