title: MUI v5 sx prop type error in TabPanel component
body: <p>I am using MUI for the first time with TypeScript and I am getting an error on the new <code>sx</code> prop. Take a look at the screenshot below on the error displayed by Typescript.
  <a href="https://i.stack.imgur.com/JYDTX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JYDTX.png" alt="enter image description here" /></a></p>
  <p>The funny thing is that I am only getting this error on the <code>TabPanel</code> Component because I have used it on other MUI components with no problem.
  Below is my code</p>
  <pre class="lang-js prettyprint-override"><code>/* eslint-disable react/require-default-props */
  import * as React from 'react';
  import Tabs from '@mui/material/Tabs';
  import Tab from '@mui/material/Tab';
  import Typography from '@mui/material/Typography';
  import Box from '@mui/material/Box';
  
  interface TabPanelProps {
    children?: React.ReactNode;
    index: number;
    value: number;
  }
  
  function TabPanel(props: TabPanelProps) {
    const { children, value, index, ...other } = props;
  
    return (
      &lt;div
        role=&quot;tabpanel&quot;
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      &gt;
        {value === index &amp;&amp; (
          &lt;Box sx={{ p: 3 }}&gt;
            &lt;Typography&gt;{children}&lt;/Typography&gt;
          &lt;/Box&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  function a11yProps(index: number) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`
    };
  }
  
  export default function MenteeVolunteerTabs() {
    const [value, setValue] = React.useState(0);
  
    const handleChange = (event: React.SyntheticEvent, newValue: number) =&gt; {
      setValue(newValue);
    };
  
    return (
      &lt;Box sx={{ width: '100%' }}&gt;
        &lt;Box sx={{ borderBottom: 1, borderColor: 'divider' }}&gt;
          &lt;Tabs value={value} onChange={handleChange} aria-label=&quot;basic tabs example&quot;&gt;
            &lt;Tab label=&quot;Volunteer&quot; {...a11yProps(0)} /&gt;
            &lt;Tab label=&quot;Mentee&quot; {...a11yProps(1)} /&gt;
          &lt;/Tabs&gt;
        &lt;/Box&gt;
        &lt;TabPanel value={value} index={0} sx={{ backgroundColor: '#F4F6F7' }}&gt;
          Item One
        &lt;/TabPanel&gt;
        &lt;TabPanel value={value} index={1}&gt;
          Item Two
        &lt;/TabPanel&gt;
      &lt;/Box&gt;
    );
  }
  </code></pre>
  <p>Kindly help solve this error</p>