diff --git a/docs/data/data-grid/row-updates/row-updates.md b/docs/data/data-grid/row-updates/row-updates.md
index 0b25a419573a..8e35772ccc71 100644
--- a/docs/data/data-grid/row-updates/row-updates.md
+++ b/docs/data/data-grid/row-updates/row-updates.md
@@ -60,7 +60,7 @@ To enable lazy loading, there are a few steps you need to follow:
 First, set `rowsLoadingMode="server"`.
 Then, set `rowCount` to reflect the number of available rows on the server.
 Third, set a callback function on `onFetchRows` to load the data corresponding to the row indices passed within `GridFetchRowsParams`.
-Finally, replace the empty rows with the newly fetched ones using `apiRef.current.replaceRows()` like in the demo below.
+Finally, replace the empty rows with the newly fetched ones using `apiRef.current.unstable_replaceRows()` like in the demo below.
 
 {{"demo": "LazyLoadingGrid.js", "bg": "inline", "disableAd": true}}
 
@@ -68,6 +68,10 @@ Finally, replace the empty rows with the newly fetched ones using `apiRef.curren
 The `onFetchRows` callback is called every time a new row is in the viewport, so when you scroll, you can easily send multiple requests to your backend. We recommend developers limit those by implementing debouncing.
 :::
 
+:::warning
+For now, lazy loading rows does not work with row grouping or tree data.
+:::
+
 :::info
 In order for filtering and sorting to work you need to set their modes to `server`.
 You can find out more information about how to do that on the [server-side filter page](/x/react-data-grid/filtering/#server-side-filter) and on the [server-side sorting page](/x/react-data-grid/sorting/#server-side-sorting).
diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts b/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts
index e25123ae15e9..74f1338934c5 100644
--- a/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts
+++ b/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts
@@ -58,13 +58,13 @@ function findSkeletonRowsSection(
 function isLazyLoadingDisabled({
   lazyLoadingFeatureFlag,
   rowsLoadingMode,
-  gridDimentions,
+  gridDimensions,
 }: {
   lazyLoadingFeatureFlag: boolean;
   rowsLoadingMode: GridFeatureMode;
-  gridDimentions: GridDimensions | null;
+  gridDimensions: GridDimensions | null;
 }) {
-  if (!lazyLoadingFeatureFlag || !gridDimentions) {
+  if (!lazyLoadingFeatureFlag || !gridDimensions) {
     return true;
   }
 
@@ -128,7 +128,7 @@ export const useGridLazyLoader = (
         isLazyLoadingDisabled({
           lazyLoadingFeatureFlag: lazyLoading,
           rowsLoadingMode: props.rowsLoadingMode,
-          gridDimentions: dimensions,
+          gridDimensions: dimensions,
         })
       ) {
         return;
@@ -176,7 +176,7 @@ export const useGridLazyLoader = (
         isLazyLoadingDisabled({
           lazyLoadingFeatureFlag: lazyLoading,
           rowsLoadingMode: props.rowsLoadingMode,
-          gridDimentions: dimensions,
+          gridDimensions: dimensions,
         })
       ) {
         return;
@@ -205,7 +205,7 @@ export const useGridLazyLoader = (
         isLazyLoadingDisabled({
           lazyLoadingFeatureFlag: lazyLoading,
           rowsLoadingMode: props.rowsLoadingMode,
-          gridDimentions: dimensions,
+          gridDimensions: dimensions,
         })
       ) {
         return;