diff --git a/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts
index 28725a9a90461..e1cf05a716b18 100644
--- a/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts
+++ b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts
@@ -88,7 +88,6 @@ export const useGridDetailPanel = (
     | 'onDetailPanelExpandedRowIdsChange'
   >,
 ): void => {
-  const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
 
   const handleCellClick = React.useCallback<GridEventListener<'cellClick'>>(
@@ -171,6 +170,7 @@ export const useGridDetailPanel = (
           },
         };
       });
+      apiRef.current.requestPipeProcessorsApplication('rowHeight');
     },
     [apiRef],
   );
@@ -290,6 +290,7 @@ export const useGridDetailPanel = (
 
   const addDetailHeight = React.useCallback<GridPipeProcessor<'rowHeight'>>(
     (initialValue, row) => {
+      const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
       if (!expandedRowIds || expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
         initialValue.detail = 0;
         return initialValue;
@@ -302,7 +303,7 @@ export const useGridDetailPanel = (
       initialValue.detail = heightCache[row.id] ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
       return initialValue;
     },
-    [apiRef, expandedRowIds, updateCachesIfNeeded],
+    [apiRef, updateCachesIfNeeded],
   );
 
   const enabled = props.getDetailPanelContent !== undefined;