Using Dividers inside Material-UI Tabs

If I want to use a Divider or something else that isn’t a Tab inside Material-UI Tabs, I get DOM warnings in the console.

<Tabs ...>
  //...
  <Divider />
  //...
</Tabs>

A workaround for this is to create a middleman-kind class like this:

<Tabs ...>
   //...
   <MDivider />
   //...
</Tabs>

function MDivider(props) {
  return <Divider />;
}

But I was thinking if this is the best solution to solve the issue or if there are other, better ways to stop getting the warning.

codesandbox with error here
codesandbox with fix here

Answer

Ok, so I think I found the best fix based on how the MUI Tabs are meant to be used. If Tabs are only meant to have MUI Tab children inside, then the MUI-intended way to do this would be to add the Divider like this:

<Tab label="" icon={<Divider />} disabled />

, give it a className and style it accordingly. The Tab component is a button with stuff inside, so you would need to override some paddings and min-heights in css.