diff --git a/docs/src/pages/components/tabs/FullWidthTabs.js b/docs/src/pages/components/tabs/FullWidthTabs.js
index 471d3a803a9b60..e1a1b2e5e27c34 100644
--- a/docs/src/pages/components/tabs/FullWidthTabs.js
+++ b/docs/src/pages/components/tabs/FullWidthTabs.js
@@ -12,16 +12,19 @@ function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`full-width-tabpanel-${index}`}
       aria-labelledby={`full-width-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/FullWidthTabs.tsx b/docs/src/pages/components/tabs/FullWidthTabs.tsx
index 29dd7da1e62700..48f45c7e805b89 100644
--- a/docs/src/pages/components/tabs/FullWidthTabs.tsx
+++ b/docs/src/pages/components/tabs/FullWidthTabs.tsx
@@ -18,16 +18,19 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`full-width-tabpanel-${index}`}
       aria-labelledby={`full-width-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/NavTabs.js b/docs/src/pages/components/tabs/NavTabs.js
index 30d18f0d9a0e00..9c6a2bbc361f27 100644
--- a/docs/src/pages/components/tabs/NavTabs.js
+++ b/docs/src/pages/components/tabs/NavTabs.js
@@ -11,16 +11,19 @@ function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`nav-tabpanel-${index}`}
       aria-labelledby={`nav-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/NavTabs.tsx b/docs/src/pages/components/tabs/NavTabs.tsx
index 34087142c014b1..a54b15e9f97838 100644
--- a/docs/src/pages/components/tabs/NavTabs.tsx
+++ b/docs/src/pages/components/tabs/NavTabs.tsx
@@ -16,16 +16,19 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`nav-tabpanel-${index}`}
       aria-labelledby={`nav-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
index afb04f734ae7f7..79ffa21dc2d800 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
@@ -11,16 +11,19 @@ function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`scrollable-auto-tabpanel-${index}`}
       aria-labelledby={`scrollable-auto-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx
index 839fa96d42627c..420fe8a4ad9cd4 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx
@@ -16,16 +16,19 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`scrollable-auto-tabpanel-${index}`}
       aria-labelledby={`scrollable-auto-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js
index 7c37f18ab05761..c739f70416fc76 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js
@@ -18,16 +18,19 @@ function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`scrollable-force-tabpanel-${index}`}
       aria-labelledby={`scrollable-force-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx
index 66fa6fb8284e0e..d36a97e5926523 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx
@@ -23,16 +23,19 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`scrollable-force-tabpanel-${index}`}
       aria-labelledby={`scrollable-force-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js
index 09cca4907fecdc..dbb8c34d2ace3b 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js
@@ -18,16 +18,19 @@ function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`scrollable-prevent-tabpanel-${index}`}
       aria-labelledby={`scrollable-prevent-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx
index b51db12827ce79..5124ecbf0ce980 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx
@@ -23,16 +23,19 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`scrollable-prevent-tabpanel-${index}`}
       aria-labelledby={`scrollable-prevent-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/SimpleTabs.js b/docs/src/pages/components/tabs/SimpleTabs.js
index d1c9a2c38373e0..491c77184cefbd 100644
--- a/docs/src/pages/components/tabs/SimpleTabs.js
+++ b/docs/src/pages/components/tabs/SimpleTabs.js
@@ -11,16 +11,19 @@ function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`simple-tabpanel-${index}`}
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/SimpleTabs.tsx b/docs/src/pages/components/tabs/SimpleTabs.tsx
index b5f32679aee336..1230b0cf5e4819 100644
--- a/docs/src/pages/components/tabs/SimpleTabs.tsx
+++ b/docs/src/pages/components/tabs/SimpleTabs.tsx
@@ -16,16 +16,19 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`simple-tabpanel-${index}`}
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.js b/docs/src/pages/components/tabs/TabsWrappedLabel.js
index 290f158336cbcd..670de0970ef7dd 100644
--- a/docs/src/pages/components/tabs/TabsWrappedLabel.js
+++ b/docs/src/pages/components/tabs/TabsWrappedLabel.js
@@ -11,16 +11,19 @@ function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`wrapped-tabpanel-${index}`}
       aria-labelledby={`wrapped-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.tsx b/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
index be5d28e0ba0bc6..be161df9c9c4f8 100644
--- a/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
+++ b/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
@@ -16,16 +16,19 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`wrapped-tabpanel-${index}`}
       aria-labelledby={`wrapped-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/VerticalTabs.js b/docs/src/pages/components/tabs/VerticalTabs.js
index dc2207caeef00a..10958261a5eaf3 100644
--- a/docs/src/pages/components/tabs/VerticalTabs.js
+++ b/docs/src/pages/components/tabs/VerticalTabs.js
@@ -10,16 +10,19 @@ function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`vertical-tabpanel-${index}`}
       aria-labelledby={`vertical-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/tabs/VerticalTabs.tsx b/docs/src/pages/components/tabs/VerticalTabs.tsx
index 5b3af8237a3f65..c23eed8bdb33af 100644
--- a/docs/src/pages/components/tabs/VerticalTabs.tsx
+++ b/docs/src/pages/components/tabs/VerticalTabs.tsx
@@ -15,16 +15,19 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <Typography
-      component="div"
+    <div
       role="tabpanel"
       hidden={value !== index}
       id={`vertical-tabpanel-${index}`}
       aria-labelledby={`vertical-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
-    </Typography>
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
   );
 }