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.

Start by reproducing the JSX example with a nested element using role='tab', then trace how clicks inside TabPanel affect tab selection. Done means clicking the nested role='tab' element no longer changes the selected tab, while normal tab changes still work.