diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
index f7272c1d57d3..685103643c46 100644
--- a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
+++ b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { Portal } from '@mui/base/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
@@ -8,10 +8,9 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 function MyCustomToolbar(props) {
   return (
     <React.Fragment>
-      {ReactDOM.createPortal(
-        <GridToolbarQuickFilter />,
-        document.getElementById('filter-panel'),
-      )}
+      <Portal container={() => document.getElementById('filter-panel')}>
+        <GridToolbarQuickFilter />
+      </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
   );
diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
index c592b8bda98d..12fc5cd7a1ab 100644
--- a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
+++ b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { Portal } from '@mui/base/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
@@ -8,10 +8,9 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 function MyCustomToolbar(props: any) {
   return (
     <React.Fragment>
-      {ReactDOM.createPortal(
-        <GridToolbarQuickFilter />,
-        document.getElementById('filter-panel')!,
-      )}
+      <Portal container={() => document.getElementById('filter-panel')!}>
+        <GridToolbarQuickFilter />
+      </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
   );