diff --git a/docs/data/data-grid/export/ExcelCustomExport.js b/docs/data/data-grid/export/ExcelCustomExport.js
index 594128a5998f..5c6f8c51b689 100644
--- a/docs/data/data-grid/export/ExcelCustomExport.js
+++ b/docs/data/data-grid/export/ExcelCustomExport.js
@@ -273,12 +273,14 @@ const exceljsPostProcess = ({ worksheet }) => {
 
 const excelOptions = { exceljsPreProcess, exceljsPostProcess };
 
+const getTreeDataPath = (row) => row.path;
+
 export default function ExcelCustomExport() {
   return (
     <div style={{ height: 500, width: '100%' }}>
       <DataGridPremium
         treeData
-        getTreeDataPath={(row) => row.path}
+        getTreeDataPath={getTreeDataPath}
         rows={rows}
         columns={columns}
         groupingColDef={groupingColDef}
diff --git a/docs/data/data-grid/export/ExcelCustomExport.tsx b/docs/data/data-grid/export/ExcelCustomExport.tsx
index 6377c269bb93..3f491db331db 100644
--- a/docs/data/data-grid/export/ExcelCustomExport.tsx
+++ b/docs/data/data-grid/export/ExcelCustomExport.tsx
@@ -4,6 +4,7 @@ import {
   GridToolbar,
   GridExceljsProcessInput,
   GridColDef,
+  DataGridPremiumProps,
 } from '@mui/x-data-grid-premium';
 
 const rows = [
@@ -279,12 +280,14 @@ const exceljsPostProcess = ({ worksheet }: GridExceljsProcessInput) => {
 
 const excelOptions = { exceljsPreProcess, exceljsPostProcess };
 
+const getTreeDataPath: DataGridPremiumProps['getTreeDataPath'] = (row) => row.path;
+
 export default function ExcelCustomExport() {
   return (
     <div style={{ height: 500, width: '100%' }}>
       <DataGridPremium
         treeData
-        getTreeDataPath={(row) => row.path}
+        getTreeDataPath={getTreeDataPath}
         rows={rows}
         columns={columns}
         groupingColDef={groupingColDef}
diff --git a/docs/data/data-grid/export/ExcelCustomExport.tsx.preview b/docs/data/data-grid/export/ExcelCustomExport.tsx.preview
index 7e5c3f73eac0..a987b545fe2c 100644
--- a/docs/data/data-grid/export/ExcelCustomExport.tsx.preview
+++ b/docs/data/data-grid/export/ExcelCustomExport.tsx.preview
@@ -1,6 +1,6 @@
 <DataGridPremium
   treeData
-  getTreeDataPath={(row) => row.path}
+  getTreeDataPath={getTreeDataPath}
   rows={rows}
   columns={columns}
   groupingColDef={groupingColDef}
diff --git a/docs/data/data-grid/tree-data/tree-data.md b/docs/data/data-grid/tree-data/tree-data.md
index 67e9e1ea6aff..fe6fa401e005 100644
--- a/docs/data/data-grid/tree-data/tree-data.md
+++ b/docs/data/data-grid/tree-data/tree-data.md
@@ -26,9 +26,11 @@ const rows: GridRowsProp = [
   { path: ['Sarah', 'Thomas', 'Karen'], jobTitle: 'Sales Person', id: 3 },
 ];
 
+const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => row.path;
+
 <DataGridPro
   treeData
-  getTreeDataPath={(row) => row.path}
+  getTreeDataPath={getTreeDataPath}
   rows={rows}
   columns={columns}
 />;
@@ -41,14 +43,22 @@ const rows: GridRowsProp = [
   { path: 'Sarah/Thomas/Karen', jobTitle: 'Sales Person', id: 3 },
 ];
 
+const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) =>
+  row.path.split('/');
+
 <DataGridPro
   treeData
-  getTreeDataPath={(row) => row.path.split('/')}
+  getTreeDataPath={getTreeDataPath}
   rows={rows}
   columns={columns}
 />;
 ```
 
+:::warning
+The `getTreeDataPath` prop should keep the same reference between two renders.
+If it changes, the data grid will consider that the data has changed and will recompute the tree resulting in collapsing all the rows.
+:::
+
 {{"demo": "TreeDataSimple.js", "bg": "inline", "defaultCodeOpen": false}}
 
 ## Custom grouping column