use-roving-focus
Hook to implement roving focus in react. Here is article explaning this https://dev.to/rafi993/roving-focus-in-react-with-custom-hooks-1ln
usage
$ npm i use-roving-focus
In your list item
; ;;; const List = { const focus setFocus = ; return <ul> characters </ul> ;}; ;
In your list item
; const Item = { const ref = ; ; const handleSelect = ; return <li tabIndex=focus ? 0 : -1 role="button" ref=ref onClick=handleSelect onKeyPress=handleSelect > character </li> ;}; ;