[Tabs] Conditionally rendering of `Tab` not working properly

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Add some tabs

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="basic tabs example"
>
  <Tab label="Item One" {...a11yProps(0)} />
  <Tab label="Item Two" {...a11yProps(1)} />
  <Tab label="Item Three" {...a11yProps(2)} />
</Tabs>

3. Wrap them in a component that checks if the tab should be displayed, for simplicity I am just retuning the children wrapped in a fragment but in theory it should make some checks to return the children or null

const Authorizer = ({ children }: { children: React.ReactNode }) => (
  <>{children}</>
);

<Authorizer>
  <Tab label="Item One" {...a11yProps(0)} />
</Authorizer>

https://codesandbox.io/s/unruffled-thunder-f405xf?file=/demo.tsx

Current behavior 😯

Tabs stop working, they can be clicked but don't navigate to the tab panel

Expected behavior 🤔

Tabs should work normally as there is not being introduced anything additional in the tree

Context 🔦

I am trying to show or hide the tabs depending on the user permissions, for this I am using an Authorizer component that returns the children (wrapped in a fragment) or null depending on if the user has the right permissions but by doing so, the tabs stop working correctly.

Your environment 🌎

  System:
    OS: macOS 12.6
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.0
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.85 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.91 => 5.0.0-alpha.91 
    @mui/material: ^5.8.4 => 5.8.4 
    @mui/private-theming:  5.8.4 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.4 
    @mui/types:  7.1.4 
    @mui/utils:  5.8.4 
    @mui/x-data-grid: ^5.12.3 => 5.12.3 
    @types/react: ^17.0.33 => 17.0.44 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.5.4 => 4.6.3 

Using Chrome

Start by reproducing the issue with the linked CodeSandbox, comparing direct Tab children with Tabs wrapped in the Authorizer fragment. Then inspect the Tabs and Tab entry points to determine how conditionally rendered children are handled; done means wrapped tabs navigate to their corresponding panels while direct tabs continue to work.