diff --git a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.js b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.js
index 0fb77c38f0aeac..b78abcd09f8fc5 100644
--- a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.js
+++ b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.js
@@ -1,26 +1,17 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import TrapFocus from '@mui/base/TrapFocus';
 
-export default function BasicTrapFocus() {
+export default function ContainedToggleTrappedFocus() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-      }}
-    >
+    <React.Fragment>
       <TrapFocus open={open} disableRestoreFocus disableAutoFocus>
-        <Stack>
-          <Stack alignItems="center">
-            <button type="button" onClick={() => setOpen(!open)}>
-              {open ? 'Close' : 'Open'}
-            </button>
-          </Stack>
+        <Stack alignItems="center" spacing={2}>
+          <button type="button" onClick={() => setOpen(!open)}>
+            {open ? 'Close' : 'Open'}
+          </button>
           {open && (
             <label>
               First name: <input type="text" />
@@ -28,6 +19,6 @@ export default function BasicTrapFocus() {
           )}
         </Stack>
       </TrapFocus>
-    </Box>
+    </React.Fragment>
   );
 }
diff --git a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx
index 0fb77c38f0aeac..b78abcd09f8fc5 100644
--- a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx
+++ b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx
@@ -1,26 +1,17 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import TrapFocus from '@mui/base/TrapFocus';
 
-export default function BasicTrapFocus() {
+export default function ContainedToggleTrappedFocus() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-      }}
-    >
+    <React.Fragment>
       <TrapFocus open={open} disableRestoreFocus disableAutoFocus>
-        <Stack>
-          <Stack alignItems="center">
-            <button type="button" onClick={() => setOpen(!open)}>
-              {open ? 'Close' : 'Open'}
-            </button>
-          </Stack>
+        <Stack alignItems="center" spacing={2}>
+          <button type="button" onClick={() => setOpen(!open)}>
+            {open ? 'Close' : 'Open'}
+          </button>
           {open && (
             <label>
               First name: <input type="text" />
@@ -28,6 +19,6 @@ export default function BasicTrapFocus() {
           )}
         </Stack>
       </TrapFocus>
-    </Box>
+    </React.Fragment>
   );
 }
diff --git a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx.preview b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx.preview
index d748ddf123628c..723ee8299fbea9 100644
--- a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx.preview
+++ b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx.preview
@@ -1,10 +1,8 @@
 <TrapFocus open={open} disableRestoreFocus disableAutoFocus>
-  <Stack>
-    <Stack alignItems="center">
-      <button type="button" onClick={() => setOpen(!open)}>
-        {open ? 'Close' : 'Open'}
-      </button>
-    </Stack>
+  <Stack alignItems="center" spacing={2}>
+    <button type="button" onClick={() => setOpen(!open)}>
+      {open ? 'Close' : 'Open'}
+    </button>
     {open && (
       <label>
         First name: <input type="text" />