Need to set tabIndex=0 to enable tab navigation
Self note again...
Answered a Stack Overflow question, React focus items list in child component after action from a different child component and learned that to enable HTML element navigation using tabs, you need to set tabindex values to 0.
I have researched for the question and replied.
What I still don't get is why it's not recommended to use tabindex value greater than 0.
Following articles urges you not use any values other than 0 & -1.
I've googled again and again but can't find any satisfactory answers, yet.
At least I was able to answer the question and provided the Sandbox.
Used React.forwardRef for the first time and worked like a charm.