The Context
I am using BlueprintJS to create a custom data-table with type-ahead results which return in a Menu component (think Google Sheets with typeaheads). I would like to be able to use the keyboard arrow keys to navigate through this menu. I'm able to focus the menu when the ArrowDown key is pressed. Then using a keyboard handler on the Menu, I keep track of the index of the current selected item and highlight it with CSS, quasi-focusing each menu item.
Here is an example of what I'm working with. Simple Input with Menu
The Problem
First and foremost, this method doesn't actually focus the list item, which destroys any accessibility. Second, using this method I can't move between submenus since the key handler is only keeping track of the top level elements of the menu.
Potential idea
When the list data changes (as it is a dynamic typeahead), create an object of Refs and pass this to the MyMenu function, and create a clever keypress handler, calling ref.current.focus() on each keypress navigation. This would properly focus the list item for accessibility, but not sure if this is the correct way to do this.
Question
What would the proper way of handling this? Is there a different component structure I should be thinking about?