diff --git a/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts b/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts
index f3f9f3998423..91accfa504de 100644
--- a/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts
+++ b/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts
@@ -3,6 +3,7 @@ import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { gridExpandedRowCountSelector } from '../filter';
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
+import { gridPinnedRowsCountSelector } from '../rows/gridRowsSelector';
 import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
 import { GridSlotsComponent } from '../../../models/gridSlotsComponent';
 
@@ -20,7 +21,8 @@ export const useGridOverlays = () => {
 
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
 
   const showNoRowsOverlay = !loading && noRows;