How to use UISwipeGestureRecognizer in ReactJS - reactjs

Question

I have a Vertical menu that is styled as a dropdown.
on iPhone, when Voiceover is on, double tab will open the dropdown, swipe Right will go through menu items, and when gets to the last menu item, Swipe Right will close the dropdown and gives focus to the first link outside of Menu.
Now, dropdown menu is closed. and menu items are not visible. Normally, one single Left swipe should moves the focus from outside link to the dropdown header while Voiceover is ON.
but the problem is, it takes multiple Left Swipe equal to the number of menu items 4+ 1 to get from outside link to dropdown header. Voiceover is not announcing anything, I can only see on iPhone screen Voiceover text reading Manu item which is the same as <a role="menuitem">.
it looks like Voiceover still recognizes the menu items although the dropdown menu is closed.
If I do NOT open dropdown menu, 1 right swipe moves focus from dropdown header to outside link, and then 1 left swipe move focus from outside link to dropdown header. the problem happens when I open dropdown menu and swipe right through menu items.
I tried to resolve this by giving UL, Li , <a> the combination of these attributes but did not work.
When menu is closed:
aria-hidden=true, tabIndex=-1, display=none, visibility=hidden
but did not work.
I am wondering if I can implement UISwipeGestureRecognizer for React JS.
I see how the import command and code for React Native but nothing for React JS.
My Question is: when dropdown menu is closed, lets say focus is on outsideLink, how can I bring focus to dropdownHeader with one Left Swipe ?
How to force Voiceover to ignore menu items when dropdown menu is closed.
Note: my module is a Class in React JS.
Really appreciate any help.
import React, { Component } from 'react'
// help needed : how to import UISwipeGestureRecognizer for React JS
class App extends Component {
constructor(props){
super(props)
this.state = {
menuOpen: false,
}
this.closeMenu = this.closeMenu.bind(this);
this.toggleMenu = this.toggleMenu.bind(this);
this.handleSwipe = this.handleSwipe.bind(this);
}
componentDidMount () {
window.addEventListener('touchstart', handleSwipe);
}
closeMenu(event){
this.setState({menuOpen: false});
this.handleSwipe(event);
}
toggleMenu(event){
this.setState({menuOpen: !this.state.menuOpen});
}
handleSwipe(event){
const outsideLinkFocused = event.target.classList.contains('outsideLink');
const dropdownHeader = document.getElementsByClassName('dropdownHeader')[0];
const leftSwipe = UISwipeGestureRecognizer.direction == 'left'; // I need help with leftSwipe condition
if(outsideLinkFocused && leftSwipe){
dropdownHeader.focus();
}
}
render() {
return (
<div className="Container">
<div className="NavContainer">
<button className="dropdownHeader">
Dropdown Header
</button>
<ul className="menu" role="menu">
<li className="item" role="none">
<a role=="menuitem" href="#"> item 1</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 2</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 3</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 4</a>
</li>
</ul>
</div>
<div className="ArticleContainer">
<a className="outsideLink" href="#"> Outside Link </a>
</div>
</div>
)
}
}
This module is more complex and all the handlers work fine. I just wrote a short version here.