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.

Empieza reproduciendo el ejemplo de JSX con un elemento anidado que use role='tab' y, a continuación, rastrea cómo afectan las acciones de clic dentro de TabPanel a la selección de pestañas. Se considera terminado cuando hacer clic en el elemento anidado role='tab' ya no cambia la pestaña seleccionada, mientras que los cambios de pestaña normales siguen funcionando.