Гэтсби: лучший способ обработать прослушиватель событий мыши в раскрывающемся списке

Question

В настоящее время я создаю веб-сайт с помощью Gatsby и добавляю раскрывающийся список для навигации. Мой код работает именно так, как я хочу, но я не уверен, как изменить / обработать предупреждения, которые я получаю:

'warning  Non-interactive elements should not be assigned mouse or keyboard event listeners'

Ниже приведена пометка для моей навигации:

<div 
  className={ isProductActive ? "btn active" : "btn"}
  onMouseEnter={ () => this.setState({isProductDDActive: true}) }
  onMouseLeave={ () => this.setState({isProductDDActive: false}) }
  role="link" 
  tabIndex={0}
>
  Header Link
</div>
<ul 
  className={ isProductActive ? "dropdown active" : "dropdown"}
  onMouseEnter={ () => this.setState({isProductDDActive: true}) }
  onMouseLeave={ () => this.setState({isProductDDActive: false}) }
>
  <li>
    <Link to="/">
      Dropdown Link 1
    </Link>
  </li>
  <li>
    <Link to="/">
      Dropdown Link 2
    </Link>
  </li>
  <li>
    <Link to="/">
      Dropdown Link 3
    </Link>
  </li>
</ul>