How do I nest Tab groups?

[dfalling]

I'm trying to nest tab groups, but am running into two issues:

• the inner tab group has nothing selected and appears blank
• any clicks on its tabs instead affect the outer tab group

Is there a recommended way to fix this?

<Tab.Group>
  <Tab.List>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </Tab.List>
  <Tab.Panels>
    <Tab.Panel>
      <Tab.Group>
        <Tab.List>
          <Tab>Inner One</Tab>
          <Tab>Inner Two</Tab>
        </Tab.List>
        <Tab.Panels>
          <Tab.Panel>Inner One</Tab.Panel>
          <Tab.Panel>Inner Two</Tab.Panel>
        </Tab.Panels>
      </Tab.Group>
    </Tab.Panel>
    <Tab.Panel>Two</Tab.Panel>
  </Tab.Panels>
</Tab.Group>

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

The code you posted should work exactly like that. You might have other things going on that break it?
Here is a codesandbox with exactly your code (+ styles): https://codesandbox.io/s/vigilant-sky-55esn?file=/src/App.js

[dfalling]

Thanks for the quick response! You're right- I goofed elsewhere, forgot the inner <Tab.Group> so it makes sense those clicks bubbled up to the next group. Thanks a lot!