Accessibility – Tab keyboard – React IScroll – Horizontal Nav

Question

I have a Horizontal nav with more than 10 items that all items cannot be visible at view, so I add React IScroll to scroll it to left & right with mouse.

The issue is when using Tab key, I need to scroll the item with focus into view if the item is not visible, but for some reason React Iscroll is not working with keyboard. The desire solution is to use scrollToElement method. I tried the following methods: scrollToElement , scrollTo, scrollBy, scrollIntoView.

Here is the React module

import iScroll from "iscroll/build/iscroll-lite";
import ReactIScroll from "react-iscroll";

componentDidMount() {
   window.addEventListener('keydown', this.handleTabScroll);
}

    handleTabScrolling(e) {
        const condition = e && e.which === 9 && e.target && e.target.parentElement.hasAttribute('class') && e.target.parentElement.classList.contains('item');

        if(condition) {
            const options={ keyBindings: true, mouseWheel: true, scrollX: true, scrollY: true, scrollbars: true,disablePointer: true, disableTouch: false, disableMouse: false, tap: true, click: true};
            const wrapperScroller = new IScroll("#wrapper", options);

            let  windowVisibleWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
            const item = e.target.parentElement;
            let itemRightPosition = item.getBoundingClientRect().right;

            const itemNotInView = windowVisibleWidth < itemRightPosition ;
            if(itemNotInView){
                wrapperScroller.scrollToElement(e.target.parentElement, 1000, true, true, IScroll.utils.ease.circular);
            }
        }
    }

render() {
   return (
       <nav aria-label="secondary nav" className="navContainer" id="wrapper">
            <ul role="menubar" classname="listContainer">
                 <li role="none" className="item">
                    <a role="menuitem" href={name} onKeyDown={onKeyDown}> Item 1</a>
                 </li>
                 <li role="none" className="item">
                    <a role="menuitem" href={name} onKeyDown={onKeyDown}> Item 2</a>
                 </li>
                  ...
                  ...
                 <li role="none" className="item">
                    <a role="menuitem" href={name} onKeyDown={onKeyDown}> Item 20</a>
                 </li>
             </ul>
       </nav>
   )
}

Only when I use scrollBy, the horizontal Nav wrapper moves to left to show the focused item and move back to original position. and Item is not visible again.

            if(itemNotInView){
                wrapperScroller..scrollBy(-itemRightPosition, 0, 1000, IScroll.utils.ease.circular);
            }

this is an old module and the markup inside return is working fine. also I have to use React IScroll since it has been already used for horizontal scroll with mouse.

How can I make React IScroll work with Tab key and bring the item with focus into view and keep the item with focus into view?