Nested elements with `role='tab'` are triggering tab change

If any child element of a TabPanel has role='tab' clicking on that element will cause the selected tab to become the first tab.

Example:

Clicking on <span>hello</hello> will cause the selected tab to change.

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>


      <div role='tab'>
          <span>hello</span>
      </div>
    </TabPanel>
  </Tabs>
);

Use Case:
Seems plausible that someone might want to use the 'tab' role on a nested element. In my particular case I'm using https://github.com/react-component/collapse within a TabPanel.

Commencez par reproduire l’exemple JSX avec un élément imbriqué utilisant role='tab', puis suivez l’impact des clics à l’intérieur de TabPanel sur la sélection de l’onglet. C’est terminé lorsque cliquer sur l’élément imbriqué role='tab' ne modifie plus l’onglet sélectionné, tandis que les changements d’onglet normaux continuent de fonctionner.