title: I have error in material UI tabs as "Failed prop type: The prop `children` is not supported. Please remove it"
body: <p>I'm using Material UI tabs for the first time in my project, everything works fine but there is one error in console while running the project here is:</p>
  <pre><code>Failed prop type: The prop `children` is not supported. Please remove it
  </code></pre>
  <p>Here is my react index.js code:</p>
  <pre><code>import { BrowserRouter as Router } from 'react-router-dom';
  
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;Router&gt;
        &lt;App /&gt;
      &lt;/Router&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>Here is my TabSection file:</p>
  <pre><code>import { AppBar, Tab, Tabs } from &quot;@material-ui/core&quot;;
  import React, { Component } from &quot;react&quot;;
  import { withRouter } from &quot;react-router-dom&quot;;
  
  import SyncCabinet from &quot;../screens/SyncCabinet&quot;;
  import ScheduleInfo from '../screens/ScheduleInfo';
  
  class TabSection extends Component {
  
      handleCallToRouter = (value) =&gt; {
          this.props.history.push(value);
      }
  
      render() {
          return (
              &lt;&gt;
                  &lt;Tabs
                      value={this.props.history.location.pathname}
                      onChange={this.handleCallToRouter}
                  &gt;
                      &lt;Tab
                          label=&quot;Synchronize Cabinet&quot;
                          value=&quot;/&quot;
                      &gt;
                          &lt;div&gt;
                              &lt;SyncCabinet /&gt;
                          &lt;/div&gt;
                      &lt;/Tab&gt;
                      &lt;Tab
                          label=&quot;Schedule Information&quot;
                          value=&quot;/ScheduleInfo&quot;
                      &gt;
                          &lt;div&gt;
                              &lt;ScheduleInfo /&gt;
                          &lt;/div&gt;
                      &lt;/Tab&gt;
                  &lt;/Tabs&gt;
              &lt;/&gt;
          )
      }
  }
  
  export default withRouter(TabSection);
  </code></pre>
  <p>Here is my App.js:</p>
  <pre><code>import Navbar from './screens/Navbar';
  import Sidebar from './screens/Sidebar';
  import SyncCabinet from './screens/SyncCabinet';
  import './App.css';
  import TabSection from './screens/TabSection';
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Navbar /&gt;
        &lt;TabSection/&gt;
        &lt;div className=&quot;sidebar__syncandsche&quot;&gt;
          &lt;Sidebar /&gt;
          &lt;SyncCabinet /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>I use Material UI Tabs. I'm trying to implement two components in two tabs respectively. Can anyone please help me? Thanks</p>