diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
index ac622547f18e..0419d8824065 100644
--- a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
+++ b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
@@ -486,7 +486,7 @@ export const useGridCellSelection = (
         newClasses.push(gridClasses['cell--rangeTop']);
       }
 
-      if (rowIndex < visibleRows.range.lastRowIndex) {
+      if (rowIndex + visibleRows.range.firstRowIndex < visibleRows.range.lastRowIndex) {
         const { id: nextRowId } = visibleRows.rows[rowIndex + 1];
         if (!apiRef.current.unstable_isCellSelected(nextRowId, field)) {
           newClasses.push(gridClasses['cell--rangeBottom']);
diff --git a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
index 30ddfc94dc73..2a17b8ed035c 100644
--- a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
+++ b/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { stub, SinonStub } from 'sinon';
 import { expect } from 'chai';
 import { spyApi, getCell } from 'test/utils/helperFn';
-import { createRenderer, fireEvent, act, userEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent, act, userEvent, screen } from '@mui-internal/test-utils';
 import {
   DataGridPremium,
   DataGridPremiumProps,
@@ -36,12 +36,12 @@ describe('<DataGridPremium /> - Cell selection', () => {
       <div style={{ width, height }}>
         <DataGridPremium
           {...data}
-          {...other}
           apiRef={apiRef}
           rowSelection={false}
           unstable_cellSelection
           disableVirtualization
           hideFooter
+          {...other}
         />
       </div>
     );
@@ -66,6 +66,26 @@ describe('<DataGridPremium /> - Cell selection', () => {
     expect(cell11).to.have.class('Mui-selected');
   });
 
+  // https://github.com/mui/mui-x/issues/10777
+  it('should work with the paginated grid', () => {
+    render(
+      <TestDataGridSelection
+        initialState={{ pagination: { paginationModel: { page: 0, pageSize: 3 } } }}
+        rowLength={30}
+        pagination
+        pageSizeOptions={[3]}
+        hideFooter={false}
+      />,
+    );
+    const cell01 = getCell(2, 0);
+    fireEvent.click(cell01);
+    expect(cell01).to.have.class('Mui-selected');
+    fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+    const cell02 = getCell(5, 0);
+    fireEvent.click(cell02);
+    expect(cell02).to.have.class('Mui-selected');
+  });
+
   describe('Ctrl + click', () => {
     it('should add the clicked cells to the selection', () => {
       render(<TestDataGridSelection />);