diff --git a/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.js b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.js
new file mode 100644
index 0000000000000..53ee4312c7d4c
--- /dev/null
+++ b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function UseNonNativeSelect() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        slotProps={{
+          baseSelect: {
+            native: false,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx
new file mode 100644
index 0000000000000..53ee4312c7d4c
--- /dev/null
+++ b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function UseNonNativeSelect() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        slotProps={{
+          baseSelect: {
+            native: false,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx.preview b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx.preview
new file mode 100644
index 0000000000000..f042b7c7db386
--- /dev/null
+++ b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx.preview
@@ -0,0 +1,8 @@
+<DataGrid
+  {...data}
+  slotProps={{
+    baseSelect: {
+      native: false,
+    },
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/filtering-recipes/filtering-recipes.md b/docs/data/data-grid/filtering-recipes/filtering-recipes.md
index 2e37485e9a098..b9c7e71005100 100644
--- a/docs/data/data-grid/filtering-recipes/filtering-recipes.md
+++ b/docs/data/data-grid/filtering-recipes/filtering-recipes.md
@@ -13,3 +13,9 @@ Currently if you want to use the [Quick filter](/x/react-data-grid/filtering/qui
 A common use case is to have certain components positioned outside of the grid. Because of the way the grid context works this might not be a straining forward thing to do. The example below illustrates how this use case can be achieved.
 
 {{"demo": "QuickFilterOutsideOfGrid.js", "bg": "inline", "defaultCodeOpen": false}}
+
+## Use non-native select in filter panel
+
+If you do not want to use the native select in the filtering panel you can switch it to the `@mui/material/Select` component by using the `slotProps` property.
+
+{{"demo": "UseNonNativeSelect.js", "bg": "inline", "defaultCodeOpen": false}}