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.

まず、role='tab'を使用するネストされた要素を含むJSXの例を再現し、次にTabPanel内のクリックがタブの選択にどのような影響を与えるかを追跡します。ネストされたrole='tab'要素をクリックしても選択中のタブが変更されなくなり、通常のタブ変更は引き続き機能すれば完了です。