From e283172b7eb4e84e47baa71b9584469cb03ca186 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 30 Dec 2024 17:04:59 +0200
Subject: [PATCH] [core] Improve React 19 support (#15769)

Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jose Quintas <juniorquintas@gmail.com>
Co-authored-by: Lukas <llukas.tyla@gmail.com>
Co-authored-by: flavien <flaviendelangle@gmail.com>
Co-authored-by: Armin Mehinovic <armin@mui.com>
Co-authored-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
---
 .circleci/config.yml                          |  62 +-
 docs/data/charts/components/ScaleDemo.tsx     |   2 +-
 .../filtering/CustomMultiValueOperator.js     |   2 +-
 .../filtering/CustomMultiValueOperator.tsx    |   2 +-
 .../data-grid/layout/MinMaxHeightGrid.tsx     |   2 +-
 .../pagination/CursorPaginationGrid.js        |   2 +-
 .../pagination/CursorPaginationGrid.tsx       |   2 +-
 .../ServerPaginationGridNoRowCount.js         |   2 +-
 .../ServerPaginationGridNoRowCount.tsx        |   2 +-
 .../customization/CustomAnimation.js          |   1 +
 .../customization/CustomAnimation.tsx         |   1 +
 .../customization/CustomAnimation.js          |   1 +
 .../customization/CustomAnimation.tsx         |   1 +
 docs/package.json                             |  24 +-
 .../modules/components/PickersPlayground.tsx  |   2 +-
 .../utils/useCustomizationPlayground.tsx      |   6 +-
 package.json                                  |  18 +-
 packages/x-charts-pro/package.json            |   4 +-
 packages/x-charts-pro/tsconfig.json           |   3 +-
 packages/x-charts/package.json                |   8 +-
 .../src/BarChart/AnimatedBarElement.tsx       |   1 +
 .../x-charts/src/LineChart/AnimatedArea.tsx   |   1 +
 .../x-charts/src/LineChart/AnimatedLine.tsx   |   1 +
 .../x-charts/src/LineChart/AppearingMask.tsx  |   1 +
 .../src/LineChart/CircleMarkElement.tsx       |   1 +
 .../x-charts/src/LineChart/MarkElement.tsx    |   1 +
 packages/x-charts/src/PieChart/PieArc.tsx     |   1 +
 .../x-charts/src/PieChart/PieArcLabel.tsx     |   1 +
 .../src/SparkLineChart/SparkLineChart.tsx     |   9 +-
 .../ChartProvider/ChartProvider.types.ts      |   2 +-
 .../src/context/SizeProvider/Size.types.ts    |   2 +-
 packages/x-charts/src/hooks/useSvgRef.ts      |   2 +-
 .../src/internals/consumeThemeProps.tsx       |   2 +-
 .../src/internals/plugins/models/plugin.ts    |   2 +-
 .../x-charts/src/internals/store/useCharts.ts |   6 +-
 .../src/internals/store/useCharts.types.ts    |   2 +-
 packages/x-charts/tsconfig.json               |   3 +-
 packages/x-codemod/tsconfig.json              |   3 +-
 packages/x-data-grid-generator/package.json   |   4 +-
 packages/x-data-grid-premium/package.json     |   4 +-
 .../cellSelection/useGridCellSelection.ts     |  10 +-
 .../src/tests/DataGridPremium.test.tsx        |   8 +-
 .../cellSelection.DataGridPremium.test.tsx    |  27 +-
 .../exportExcel.DataGridPremium.test.tsx      |   5 +-
 .../rowSelection.DataGridPremium.test.tsx     |  12 +-
 .../statePersistence.DataGridPremium.test.tsx |  35 +-
 packages/x-data-grid-pro/package.json         |   4 +-
 .../DataGridPro/useDataGridProComponent.tsx   |   2 +-
 .../columnReorder/useGridColumnReorder.tsx    |   2 +-
 .../detailPanel/useGridDetailPanel.ts         |   4 +-
 .../infiniteLoader/useGridInfiniteLoader.tsx  |   2 +-
 .../features/rowReorder/useGridRowReorder.tsx |   2 +-
 .../tests/cellEditing.DataGridPro.test.tsx    |  28 +-
 .../tests/columnPinning.DataGridPro.test.tsx  |  56 +-
 .../tests/columnReorder.DataGridPro.test.tsx  |  10 +-
 .../src/tests/components.DataGridPro.test.tsx |   9 +-
 .../dataSourceTreeData.DataGridPro.test.tsx   |  58 +-
 .../tests/detailPanel.DataGridPro.test.tsx    |  53 +-
 .../tests/editComponents.DataGridPro.test.tsx |  23 +-
 .../src/tests/rowEditing.DataGridPro.test.tsx |  17 +-
 .../src/tests/rowPinning.DataGridPro.test.tsx |  41 +-
 .../tests/rowSelection.DataGridPro.test.tsx   | 484 +++++-----
 packages/x-data-grid/package.json             |   6 +-
 .../src/DataGrid/useDataGridComponent.tsx     |   2 +-
 .../components/cell/GridActionsCellItem.tsx   |   6 +-
 .../src/components/cell/GridEditDateCell.tsx  |   2 +-
 .../src/components/cell/GridEditInputCell.tsx |   2 +-
 .../cell/GridEditSingleSelectCell.tsx         |   4 +-
 .../columnHeaders/ColumnHeaderMenuIcon.tsx    |   2 +-
 .../GridColumnHeaderFilterIconButton.tsx      |   2 +-
 .../src/components/panel/GridPanel.test.tsx   |   2 +-
 .../toolbar/GridToolbarDensitySelector.tsx    |   4 +-
 .../toolbar/GridToolbarFilterButton.tsx       |   4 +-
 .../pipeProcessing/gridPipeProcessingApi.ts   |   5 +-
 .../pipeProcessing/useGridPipeProcessing.ts   |   2 +-
 .../useGridRegisterPipeApplier.ts             |   4 +-
 .../useGridRegisterPipeProcessor.ts           |   4 +-
 .../useGridRegisterStrategyProcessor.ts       |   2 +-
 .../useGridStrategyProcessing.ts              |   2 +-
 .../hooks/core/useGridApiInitialization.ts    |  12 +-
 .../src/hooks/core/useGridInitialization.ts   |   2 +-
 .../src/hooks/core/useGridIsRtl.tsx           |   2 +-
 .../src/hooks/core/useGridLocaleText.tsx      |   2 +-
 .../src/hooks/core/useGridLoggerFactory.ts    |   2 +-
 .../x-data-grid/src/hooks/core/useGridRefs.ts |   4 +-
 .../hooks/core/useGridStateInitialization.ts  |   2 +-
 .../columnResize/useGridColumnResize.tsx      |  14 +-
 .../features/editing/useGridRowEditing.ts     |   2 +-
 .../features/export/useGridPrintExport.tsx    |   2 +-
 .../useGridKeyboardNavigation.ts              |   2 +-
 .../useGridPreferencesPanel.ts                |   4 +-
 .../useGridRowSelectionPreProcessors.ts       |   2 +-
 .../hooks/features/rows/useGridRowSpanning.ts |   2 +-
 .../rows/useGridRowsPreProcessors.tsx         |   4 +-
 .../virtualization/useGridVirtualScroller.tsx |  14 +-
 .../src/hooks/utils/useGridApiEventHandler.ts |   2 +-
 .../src/hooks/utils/useGridApiMethod.ts       |   2 +-
 .../src/hooks/utils/useGridApiRef.ts          |   2 +-
 .../src/hooks/utils/useGridInitializeState.ts |   4 +-
 .../src/hooks/utils/useGridLogger.ts          |   2 +-
 .../src/hooks/utils/useGridVisibleRows.ts     |   4 +-
 .../x-data-grid/src/models/api/gridCoreApi.ts |  14 +-
 .../src/models/api/gridDensityApi.ts          |   2 +-
 .../src/models/props/DataGridProps.ts         |   2 +-
 .../tests/columnsVisibility.DataGrid.test.tsx | 103 +-
 .../src/tests/rowSelection.DataGrid.test.tsx  | 421 +++++----
 .../src/tests/rows.DataGrid.test.tsx          |  15 +-
 .../src/tests/sorting.DataGrid.test.tsx       |  10 +-
 packages/x-data-grid/tsconfig.json            |   3 +-
 packages/x-date-pickers-pro/package.json      |   4 +-
 .../DateTimeRangePickerTabs.tsx               |   4 +-
 .../DateTimeRangePickerTimeWrapper.tsx        |   7 +-
 .../useDesktopRangePicker.tsx                 |   2 +-
 .../hooks/useEnrichedRangePickerFieldProps.ts |   6 +-
 .../useMultiInputFieldSelectedSections.ts     |  13 +-
 .../src/internals/hooks/useRangePosition.ts   |   2 +-
 packages/x-date-pickers/package.json          |   4 +-
 .../PickersFadeTransitionGroup.tsx            |   2 +-
 .../DateCalendar/PickersSlideTransition.tsx   |   4 +-
 .../hooks/useField/useFieldV6TextField.ts     |   4 +-
 .../hooks/usePicker/usePickerViews.ts         |   2 +-
 .../hooks/useStaticPicker/useStaticPicker.tsx |   1 -
 .../src/internals/hooks/useUtils.ts           |   2 +-
 packages/x-tree-view-pro/package.json         |   4 +-
 packages/x-tree-view/package.json             |   4 +-
 .../TreeViewProvider.types.ts                 |   2 +-
 .../hooks/useInstanceEventHandler.ts          |   2 +-
 .../src/internals/models/plugin.ts            |   2 +-
 .../src/internals/useTreeView/useTreeView.ts  |   2 +-
 .../useTreeView/useTreeViewBuildContext.ts    |   2 +-
 .../src/useTreeItem/useTreeItem.types.ts      |   2 +-
 pnpm-lock.yaml                                | 878 +++++++++---------
 test/package.json                             |   8 +-
 test/performance-charts/package.json          |   4 +-
 test/tsconfig.json                            |   3 +-
 test/utils/describeConformance.ts             |   2 +-
 test/utils/describeSlotsConformance.tsx       |   2 +-
 test/utils/helperFn.ts                        |   4 +-
 test/utils/pickers/createPickerRenderer.tsx   |   2 +-
 .../describePicker/describePicker.types.ts    |   2 +-
 .../describeValidation.types.ts               |   2 +-
 .../describeValue/describeValue.types.ts      |   2 +-
 test/utils/pickers/fields.tsx                 |   2 +-
 .../describeTreeView.types.ts                 |   2 +-
 144 files changed, 1471 insertions(+), 1320 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 75cec3cf6ffb4..37a0482a6eca5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -57,6 +57,16 @@ default-context: &default-context
   context:
     - org-global
 
+test-react-18-context: &test-react-18-context
+  <<: *default-context
+  react-version: ^18.0.0
+  filters:
+    branches:
+      only:
+        - master
+        - /^v.*\.x$/
+        - next
+
 commands:
   install_js:
     parameters:
@@ -64,6 +74,10 @@ commands:
         type: boolean
         default: false
         description: 'Set to true if you intend to any browser (for example with playwright).'
+      react-version:
+        type: string
+        default: << pipeline.parameters.react-version >>
+        description: The version of React to use.
 
     steps:
       - when:
@@ -81,14 +95,35 @@ commands:
                 # See https://stackoverflow.com/a/73411601
                 command: corepack enable --install-directory ~/bin
 
+      - when:
+          condition:
+            not:
+              equal: [stable, << parameters.react-version >>]
+          steps:
+            - run:
+                name: Change pnpm setting to not install peer dependencies
+                command: pnpm config set auto-install-peers false --location project
+
       - run:
           name: View install environment
           command: |
             node --version
             pnpm --version
-      - run:
-          name: Install js dependencies
-          command: pnpm install
+      - when:
+          condition:
+            not:
+              equal: [stable, << parameters.react-version >>]
+          steps:
+            - run:
+                name: Install js dependencies without frozen lockfile
+                command: pnpm install --no-frozen-lockfile
+      - when:
+          condition:
+            equal: [stable, << parameters.react-version >>]
+          steps:
+            - run:
+                name: Install js dependencies
+                command: pnpm install
 
       - run:
           name: Resolve React version
@@ -127,7 +162,8 @@ jobs:
     <<: *default-job
     steps:
       - checkout
-      - install_js
+      - install_js:
+          react-version: << parameters.react-version >>
       - run:
           name: Tests fake browser
           command: pnpm test:coverage
@@ -237,6 +273,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Tests real browsers
           command: pnpm test:karma
@@ -268,6 +305,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Run e2e tests
           command: pnpm test:e2e
@@ -292,6 +330,7 @@ jobs:
       - checkout
       - install_js:
           browsers: true
+          react-version: << parameters.react-version >>
       - run:
           name: Install ffmpeg
           command: apt update && apt upgrade -y && apt install ffmpeg -y
@@ -310,7 +349,6 @@ jobs:
           name: Run danger on PRs
           command: pnpm danger ci --fail-on-errors
 workflows:
-  version: 2
   pipeline:
     when:
       equal: [pipeline, << pipeline.parameters.workflow >>]
@@ -394,3 +432,17 @@ workflows:
       - test_types:
           <<: *default-context
           name: test_types_additional
+  test-react-18:
+    jobs:
+      - test_unit:
+          <<: *test-react-18-context
+          name: test_unit_react_18
+      - test_browser:
+          <<: *test-react-18-context
+          name: test_browser_react_18
+      - test_regressions:
+          <<: *test-react-18-context
+          name: test_regressions_react_18
+      - test_e2e:
+          <<: *test-react-18-context
+          name: test_e2e_react_18
diff --git a/docs/data/charts/components/ScaleDemo.tsx b/docs/data/charts/components/ScaleDemo.tsx
index 14837a6eb2e5d..094fce069f0a1 100644
--- a/docs/data/charts/components/ScaleDemo.tsx
+++ b/docs/data/charts/components/ScaleDemo.tsx
@@ -21,7 +21,7 @@ const StyledText = styled('text')(({ theme }) => ({
   shapeRendering: 'crispEdges',
 }));
 
-function ValueHighlight(props: { svgRef: React.RefObject<SVGSVGElement> }) {
+function ValueHighlight(props: { svgRef: React.RefObject<SVGSVGElement | null> }) {
   const { svgRef } = props;
 
   // Get the drawing area bounding box
diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.js b/docs/data/data-grid/filtering/CustomMultiValueOperator.js
index 7155e509dc995..4dbfb04c5a87e 100644
--- a/docs/data/data-grid/filtering/CustomMultiValueOperator.js
+++ b/docs/data/data-grid/filtering/CustomMultiValueOperator.js
@@ -9,7 +9,7 @@ function InputNumberInterval(props) {
   const rootProps = useGridRootProps();
   const { item, applyValue, focusElementRef = null } = props;
 
-  const filterTimeout = React.useRef();
+  const filterTimeout = React.useRef(undefined);
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
 
diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx b/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx
index 0ac2080fb364b..d1d777e8b4848 100644
--- a/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx
+++ b/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx
@@ -15,7 +15,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) {
   const rootProps = useGridRootProps();
   const { item, applyValue, focusElementRef = null } = props;
 
-  const filterTimeout = React.useRef<any>();
+  const filterTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const [filterValueState, setFilterValueState] = React.useState<[string, string]>(
     item.value ?? '',
   );
diff --git a/docs/data/data-grid/layout/MinMaxHeightGrid.tsx b/docs/data/data-grid/layout/MinMaxHeightGrid.tsx
index 79bb6db519699..66d52455a4a87 100644
--- a/docs/data/data-grid/layout/MinMaxHeightGrid.tsx
+++ b/docs/data/data-grid/layout/MinMaxHeightGrid.tsx
@@ -53,7 +53,7 @@ export default function MinMaxHeightGrid() {
 function ContainerMeasurements({
   containerRef,
 }: {
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
 }) {
   const [containerHeight, setContainerHeight] = React.useState(0);
 
diff --git a/docs/data/data-grid/pagination/CursorPaginationGrid.js b/docs/data/data-grid/pagination/CursorPaginationGrid.js
index 1815b05771007..2bc291793b737 100644
--- a/docs/data/data-grid/pagination/CursorPaginationGrid.js
+++ b/docs/data/data-grid/pagination/CursorPaginationGrid.js
@@ -48,7 +48,7 @@ export default function CursorPaginationGrid() {
     }
   };
 
-  const paginationMetaRef = React.useRef();
+  const paginationMetaRef = React.useRef(undefined);
 
   // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
   const paginationMeta = React.useMemo(() => {
diff --git a/docs/data/data-grid/pagination/CursorPaginationGrid.tsx b/docs/data/data-grid/pagination/CursorPaginationGrid.tsx
index 113e1b7945c45..4d92a2a68be5c 100644
--- a/docs/data/data-grid/pagination/CursorPaginationGrid.tsx
+++ b/docs/data/data-grid/pagination/CursorPaginationGrid.tsx
@@ -55,7 +55,7 @@ export default function CursorPaginationGrid() {
     }
   };
 
-  const paginationMetaRef = React.useRef<GridPaginationMeta>();
+  const paginationMetaRef = React.useRef<GridPaginationMeta>(undefined);
 
   // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
   const paginationMeta = React.useMemo(() => {
diff --git a/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.js b/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.js
index 2de106edc5d3e..239db20b0e972 100644
--- a/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.js
+++ b/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.js
@@ -23,7 +23,7 @@ export default function ServerPaginationGridNoRowCount() {
     pageInfo: { hasNextPage },
   } = useQuery(paginationModel);
 
-  const paginationMetaRef = React.useRef();
+  const paginationMetaRef = React.useRef(undefined);
 
   // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
   const paginationMeta = React.useMemo(() => {
diff --git a/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.tsx b/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.tsx
index bb35ce14cebd5..98fdf4dcc1513 100644
--- a/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.tsx
+++ b/docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.tsx
@@ -23,7 +23,7 @@ export default function ServerPaginationGridNoRowCount() {
     pageInfo: { hasNextPage },
   } = useQuery(paginationModel);
 
-  const paginationMetaRef = React.useRef<GridPaginationMeta>();
+  const paginationMetaRef = React.useRef<GridPaginationMeta>(undefined);
 
   // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
   const paginationMeta = React.useMemo(() => {
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
index 7941d92b58e5d..cd398604ab5bf 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
@@ -45,6 +45,7 @@ function TransitionComponent(props) {
   });
 
   return (
+    // @ts-expect-error
     <animated.div style={style}>
       <Collapse {...props} />
     </animated.div>
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
index 234b4b656bd98..60fd9f16f5251 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
@@ -45,6 +45,7 @@ function TransitionComponent(props: TransitionProps) {
   });
 
   return (
+    // @ts-expect-error
     <animated.div style={style}>
       <Collapse {...props} />
     </animated.div>
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js
index f507b6768cca7..e88f87658b23f 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js
@@ -15,6 +15,7 @@ function TransitionComponent(props) {
   });
 
   return (
+    // @ts-expect-error
     <animated.div style={style}>
       <Collapse {...props} />
     </animated.div>
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx
index 5a2428ac5a08d..e46d7537cb9e1 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx
@@ -15,6 +15,7 @@ function TransitionComponent(props: TransitionProps) {
   });
 
   return (
+    // @ts-expect-error
     <animated.div style={style}>
       <Collapse {...props} />
     </animated.div>
diff --git a/docs/package.json b/docs/package.json
index 9f66326e3390e..1e24e9943a602 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -28,14 +28,14 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.0",
     "@mui/docs": "6.2.1",
-    "@mui/icons-material": "^5.16.11",
-    "@mui/joy": "^5.0.0-beta.48",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.11",
-    "@mui/material-nextjs": "^5.16.8",
-    "@mui/styles": "^5.16.11",
-    "@mui/system": "^5.16.8",
-    "@mui/utils": "^5.16.8",
+    "@mui/icons-material": "^5.16.13",
+    "@mui/joy": "^5.0.0-beta.51",
+    "@mui/lab": "^5.0.0-alpha.175",
+    "@mui/material": "^5.16.13",
+    "@mui/material-nextjs": "^5.16.13",
+    "@mui/styles": "^5.16.13",
+    "@mui/system": "^5.16.13",
+    "@mui/utils": "^5.16.13",
     "@mui/x-charts": "workspace:*",
     "@mui/x-charts-vendor": "workspace:*",
     "@mui/x-data-grid": "workspace:*",
@@ -81,11 +81,11 @@
     "postcss": "^8.4.49",
     "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-docgen": "^5.4.3",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "react-router": "^6.28.1",
     "react-router-dom": "^6.28.1",
     "react-runner": "^1.0.5",
@@ -114,7 +114,7 @@
     "@types/moment-hijri": "^2.1.4",
     "@types/moment-jalaali": "^0.7.9",
     "@types/prop-types": "^15.7.14",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^19.0.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/stylis": "^4.2.7",
     "@types/webpack-bundle-analyzer": "^4.7.0",
diff --git a/docs/src/modules/components/PickersPlayground.tsx b/docs/src/modules/components/PickersPlayground.tsx
index ec32edbfb3cda..e84a07d4f2438 100644
--- a/docs/src/modules/components/PickersPlayground.tsx
+++ b/docs/src/modules/components/PickersPlayground.tsx
@@ -220,7 +220,7 @@ const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
   { label: 'Reset', getValue: () => [null, null] },
 ];
 
-function DisabledCheckboxTooltip({ children }: { children: React.ReactElement }) {
+function DisabledCheckboxTooltip({ children }: { children: React.ReactElement<any> }) {
   return (
     <Tooltip title="At least one view has to be provided to the components">{children}</Tooltip>
   );
diff --git a/docs/src/modules/utils/useCustomizationPlayground.tsx b/docs/src/modules/utils/useCustomizationPlayground.tsx
index f3a92e7c3e136..5634e025d0b00 100644
--- a/docs/src/modules/utils/useCustomizationPlayground.tsx
+++ b/docs/src/modules/utils/useCustomizationPlayground.tsx
@@ -24,13 +24,13 @@ export type PickersSubcomponentType = {
   [k: string]: {
     examples: CustomizationItemsType;
     slots: string[];
-    moreInformation?: React.ReactElement | string;
+    moreInformation?: React.ReactElement<any> | string;
   };
 };
 
 export interface UseCustomizationPlaygroundProps {
   examples: PickersSubcomponentType;
-  children?: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement<any> | React.ReactElement<any>[];
   componentName: string;
 }
 export const customizationLabels: CustomizationLabelType = {
@@ -72,7 +72,7 @@ export type UseCustomizationPlaygroundReturnType = {
   handleTokenChange: HandleTokenChangeType;
   selectedTokens: StyleTokensType;
   selectedExample?: CustomizationItemType | null;
-  moreInformation?: React.ReactElement | string | null;
+  moreInformation?: React.ReactElement<any> | string | null;
 };
 
 export function withStyles(
diff --git a/package.json b/package.json
index fd4376c840a75..a09bb69668969 100644
--- a/package.json
+++ b/package.json
@@ -90,13 +90,13 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^5.16.11",
+    "@mui/icons-material": "^5.16.13",
     "@mui/internal-babel-plugin-resolve-imports": "1.0.19",
     "@mui/internal-markdown": "^1.0.22",
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/monorepo": "github:mui/material-ui#0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60",
-    "@mui/utils": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/monorepo": "github:mui/material-ui#356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c",
+    "@mui/utils": "^5.16.13",
     "@next/eslint-plugin-next": "15.1.3",
     "@octokit/plugin-retry": "^7.1.2",
     "@octokit/rest": "^21.0.2",
@@ -110,8 +110,8 @@
     "@types/lodash": "^4.17.13",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20.17.10",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/requestidlecallback": "^0.3.7",
     "@types/sinon": "^17.0.3",
     "@types/yargs": "^17.0.33",
@@ -178,8 +178,8 @@
     "prettier": "^3.4.2",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "remark": "^15.0.1",
     "rimraf": "^6.0.1",
     "serve": "^14.2.4",
@@ -197,7 +197,7 @@
     "yargs": "^17.7.2"
   },
   "resolutions": {
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "@types/node": "^20.17.10"
   },
   "packageManager": "pnpm@9.15.1",
diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
index 35cd481ae7cfc..a9c9de0ca921b 100644
--- a/packages/x-charts-pro/package.json
+++ b/packages/x-charts-pro/package.json
@@ -67,8 +67,8 @@
     }
   },
   "devDependencies": {
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@react-spring/core": "^9.7.5",
     "@react-spring/shared": "^9.7.5",
     "@types/prop-types": "^15.7.14",
diff --git a/packages/x-charts-pro/tsconfig.json b/packages/x-charts-pro/tsconfig.json
index 5f862d31ec2ba..f63ee3ebfc2ad 100644
--- a/packages/x-charts-pro/tsconfig.json
+++ b/packages/x-charts-pro/tsconfig.json
@@ -8,7 +8,8 @@
       "mocha",
       "node"
     ],
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "skipLibCheck": true
   },
   "include": ["src/**/*", "../../test/utils/addChaiAssertions.ts"]
 }
diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
index 146e3a2ac798a..c30dfae066377 100644
--- a/packages/x-charts/package.json
+++ b/packages/x-charts/package.json
@@ -47,7 +47,7 @@
     "@react-spring/web": "^9.7.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "react-is": "^18.3.1",
+    "react-is": "^18.3.1 || ^19.0.0",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0"
   },
@@ -69,12 +69,12 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@react-spring/core": "^9.7.5",
     "@react-spring/shared": "^9.7.5",
     "@types/prop-types": "^15.7.14",
-    "@types/react-is": "^18.3.1",
+    "@types/react-is": "^19.0.0",
     "@types/use-sync-external-store": "^0.0.6",
     "csstype": "^3.1.3",
     "rimraf": "^6.0.1"
diff --git a/packages/x-charts/src/BarChart/AnimatedBarElement.tsx b/packages/x-charts/src/BarChart/AnimatedBarElement.tsx
index 854f64ffcc2a9..f647044a880cc 100644
--- a/packages/x-charts/src/BarChart/AnimatedBarElement.tsx
+++ b/packages/x-charts/src/BarChart/AnimatedBarElement.tsx
@@ -26,6 +26,7 @@ export function AnimatedBarElement(props: BarProps) {
   return (
     <animated.rect
       {...other}
+      // @ts-expect-error
       filter={ownerState.isHighlighted ? 'brightness(120%)' : undefined}
       opacity={ownerState.isFaded ? 0.3 : 1}
     />
diff --git a/packages/x-charts/src/LineChart/AnimatedArea.tsx b/packages/x-charts/src/LineChart/AnimatedArea.tsx
index 4d1d3cbe7cbde..ade2f449880a4 100644
--- a/packages/x-charts/src/LineChart/AnimatedArea.tsx
+++ b/packages/x-charts/src/LineChart/AnimatedArea.tsx
@@ -43,6 +43,7 @@ function AnimatedArea(props: AnimatedAreaProps) {
     <AppearingMask skipAnimation={skipAnimation} id={`${ownerState.id}-area-clip`}>
       {transitionChange((style, interpolator) => (
         <animated.path
+          // @ts-expect-error
           d={style.value.to(interpolator)}
           fill={ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color}
           filter={
diff --git a/packages/x-charts/src/LineChart/AnimatedLine.tsx b/packages/x-charts/src/LineChart/AnimatedLine.tsx
index 8564435da881c..df67b20e93fda 100644
--- a/packages/x-charts/src/LineChart/AnimatedLine.tsx
+++ b/packages/x-charts/src/LineChart/AnimatedLine.tsx
@@ -43,6 +43,7 @@ function AnimatedLine(props: AnimatedLineProps) {
     <AppearingMask skipAnimation={skipAnimation} id={`${ownerState.id}-line-clip`}>
       {transitionChange((style, interpolator) => (
         <animated.path
+          // @ts-expect-error
           d={style.value.to(interpolator)}
           stroke={ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color}
           strokeWidth={2}
diff --git a/packages/x-charts/src/LineChart/AppearingMask.tsx b/packages/x-charts/src/LineChart/AppearingMask.tsx
index cbf7a341f375e..6121e2e215502 100644
--- a/packages/x-charts/src/LineChart/AppearingMask.tsx
+++ b/packages/x-charts/src/LineChart/AppearingMask.tsx
@@ -35,6 +35,7 @@ export function AppearingMask(props: AppearingMaskProps) {
       <clipPath id={clipId}>
         {transitionAppear((style) => (
           <animated.rect
+            // @ts-expect-error
             x={0}
             y={0}
             width={style.animatedWidth}
diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx
index bb30e379ebbbc..47986228c3d15 100644
--- a/packages/x-charts/src/LineChart/CircleMarkElement.tsx
+++ b/packages/x-charts/src/LineChart/CircleMarkElement.tsx
@@ -85,6 +85,7 @@ function CircleMarkElement(props: CircleMarkElementProps) {
   return (
     <animated.circle
       {...other}
+      // @ts-expect-error
       cx={position.x}
       cy={position.y}
       r={5}
diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx
index 8b3da371d9d90..5f1105afff2f3 100644
--- a/packages/x-charts/src/LineChart/MarkElement.tsx
+++ b/packages/x-charts/src/LineChart/MarkElement.tsx
@@ -89,6 +89,7 @@ function MarkElement(props: MarkElementProps) {
         transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
       }}
       ownerState={ownerState}
+      // @ts-expect-error
       className={classes.root}
       d={d3Symbol(d3SymbolsFill[getSymbol(shape)])()!}
       onClick={onClick}
diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx
index 3975b2f38eaa1..ba7b8ce79d833 100644
--- a/packages/x-charts/src/PieChart/PieArc.tsx
+++ b/packages/x-charts/src/PieChart/PieArc.tsx
@@ -120,6 +120,7 @@ function PieArc(props: PieArcProps) {
           })!,
       )}
       visibility={to([startAngle, endAngle], (sA, eA) => (sA === eA ? 'hidden' : 'visible'))}
+      // @ts-expect-error
       onClick={onClick}
       cursor={onClick ? 'pointer' : 'unset'}
       ownerState={ownerState}
diff --git a/packages/x-charts/src/PieChart/PieArcLabel.tsx b/packages/x-charts/src/PieChart/PieArcLabel.tsx
index 7734d46b60faf..20eb27a030a64 100644
--- a/packages/x-charts/src/PieChart/PieArcLabel.tsx
+++ b/packages/x-charts/src/PieChart/PieArcLabel.tsx
@@ -129,6 +129,7 @@ function PieArcLabel(props: PieArcLabelProps) {
   const classes = useUtilityClasses(ownerState);
 
   return (
+    // @ts-expect-error
     <PieArcLabelRoot
       className={classes.root}
       {...other}
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index 2b7024ace2881..248fc891b5cbf 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -199,14 +199,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(
         axisHighlight?.y === 'none'
       }
     >
-      {plotType === 'bar' && (
-        <BarPlot
-          skipAnimation
-          slots={slots}
-          slotProps={slotProps}
-          sx={{ shapeRendering: 'auto' }}
-        />
-      )}
+      {plotType === 'bar' && <BarPlot skipAnimation slots={slots} slotProps={slotProps} />}
 
       {plotType === 'line' && (
         <React.Fragment>
diff --git a/packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts b/packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts
index feb2fa13caf96..0b6d0160438eb 100644
--- a/packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts
+++ b/packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts
@@ -25,7 +25,7 @@ export type ChartContextValue<
   /**
    * The ref to the <svg />.
    */
-  svgRef: React.RefObject<SVGSVGElement>;
+  svgRef: React.RefObject<SVGSVGElement | null>;
 };
 
 // export interface ChartProviderProps<TSignatures extends readonly ChartAnyPluginSignature[]> {
diff --git a/packages/x-charts/src/context/SizeProvider/Size.types.ts b/packages/x-charts/src/context/SizeProvider/Size.types.ts
index 46a477ce55516..8a069e3972ef4 100644
--- a/packages/x-charts/src/context/SizeProvider/Size.types.ts
+++ b/packages/x-charts/src/context/SizeProvider/Size.types.ts
@@ -16,7 +16,7 @@ export interface SizeContextState extends Required<Pick<SizeProviderProps, 'heig
   /**
    * The ref of the svg element that the chart is rendered in.
    */
-  svgRef: React.RefObject<SVGSVGElement>;
+  svgRef: React.RefObject<SVGSVGElement | null>;
   /**
    * If the chart has a defined size.
    */
diff --git a/packages/x-charts/src/hooks/useSvgRef.ts b/packages/x-charts/src/hooks/useSvgRef.ts
index 5a76dc4f2de90..2da48b2992733 100644
--- a/packages/x-charts/src/hooks/useSvgRef.ts
+++ b/packages/x-charts/src/hooks/useSvgRef.ts
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useChartContext } from '../context/ChartProvider';
 
-export function useSvgRef(): React.RefObject<SVGSVGElement> {
+export function useSvgRef(): React.RefObject<SVGSVGElement | null> {
   const context = useChartContext();
 
   if (!context) {
diff --git a/packages/x-charts/src/internals/consumeThemeProps.tsx b/packages/x-charts/src/internals/consumeThemeProps.tsx
index e8ce29b6c55d6..217550c1b07ad 100644
--- a/packages/x-charts/src/internals/consumeThemeProps.tsx
+++ b/packages/x-charts/src/internals/consumeThemeProps.tsx
@@ -62,7 +62,7 @@ export const consumeThemeProps = <
       | ((props: Props) => Omit<Partial<Props>, 'slots' | 'slotProps'>);
     classesResolver?: (props: Props, theme: any) => Record<string, string>;
   },
-  InComponent: React.JSXElementConstructor<Props>,
+  InComponent: React.ForwardRefRenderFunction<any, Props>,
 ) => {
   function InternalComponent(props: React.PropsWithoutRef<Props>, ref: React.Ref<any>) {
     const themedProps = useThemeProps({
diff --git a/packages/x-charts/src/internals/plugins/models/plugin.ts b/packages/x-charts/src/internals/plugins/models/plugin.ts
index 405020c1bff71..7f2e1b7e7f351 100644
--- a/packages/x-charts/src/internals/plugins/models/plugin.ts
+++ b/packages/x-charts/src/internals/plugins/models/plugin.ts
@@ -8,7 +8,7 @@ export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature>
   instance: ChartUsedInstance<TSignature>;
   params: ChartUsedDefaultizedParams<TSignature>;
   store: ChartUsedStore<TSignature>;
-  svgRef: React.RefObject<SVGSVGElement>;
+  svgRef: React.RefObject<SVGSVGElement | null>;
   plugins: ChartPlugin<ChartAnyPluginSignature>[];
 }
 
diff --git a/packages/x-charts/src/internals/store/useCharts.ts b/packages/x-charts/src/internals/store/useCharts.ts
index ae0738c84879b..ff1b75cba0678 100644
--- a/packages/x-charts/src/internals/store/useCharts.ts
+++ b/packages/x-charts/src/internals/store/useCharts.ts
@@ -14,9 +14,9 @@ import { UseChartBaseProps } from './useCharts.types';
 import { UseChartInteractionState } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
 
 export function useChartApiInitialization<T>(
-  inputApiRef: React.MutableRefObject<T | undefined> | undefined,
+  inputApiRef: React.RefObject<T | undefined> | undefined,
 ): T {
-  const fallbackPublicApiRef = React.useRef({}) as React.MutableRefObject<T>;
+  const fallbackPublicApiRef = React.useRef({}) as React.RefObject<T>;
 
   if (inputApiRef) {
     if (inputApiRef.current == null) {
@@ -55,7 +55,7 @@ export function useCharts<
   const instanceRef = React.useRef({} as ChartInstance<TSignatures>);
   const instance = instanceRef.current as ChartInstance<TSignatures>;
   const publicAPI = useChartApiInitialization<ChartPublicAPI<TSignatures>>(props.apiRef);
-  const innerSvgRef: React.RefObject<SVGSVGElement> = React.useRef(null);
+  const innerSvgRef = React.useRef<SVGSVGElement>(null);
 
   const storeRef = React.useRef<ChartStore<TSignaturesWithCorePluginSignatures> | null>(null);
   if (storeRef.current == null) {
diff --git a/packages/x-charts/src/internals/store/useCharts.types.ts b/packages/x-charts/src/internals/store/useCharts.types.ts
index 1b229c8470ae9..5af578d02f63e 100644
--- a/packages/x-charts/src/internals/store/useCharts.types.ts
+++ b/packages/x-charts/src/internals/store/useCharts.types.ts
@@ -2,5 +2,5 @@ import * as React from 'react';
 import { ChartAnyPluginSignature, ChartPublicAPI } from '../plugins/models';
 
 export interface UseChartBaseProps<TSignatures extends readonly ChartAnyPluginSignature[]> {
-  apiRef: React.MutableRefObject<ChartPublicAPI<TSignatures> | undefined> | undefined;
+  apiRef: React.RefObject<ChartPublicAPI<TSignatures> | undefined> | undefined;
 }
diff --git a/packages/x-charts/tsconfig.json b/packages/x-charts/tsconfig.json
index 96d9df1cf6673..8cd34736be383 100644
--- a/packages/x-charts/tsconfig.json
+++ b/packages/x-charts/tsconfig.json
@@ -7,7 +7,8 @@
       "chai-dom",
       "mocha",
       "node"
-    ]
+    ],
+    "skipLibCheck": true
   },
   "include": ["src/**/*", "../../test/utils/addChaiAssertions.ts", "../../test/utils/init.ts"]
 }
diff --git a/packages/x-codemod/tsconfig.json b/packages/x-codemod/tsconfig.json
index 8ed9735012229..97636e2180272 100644
--- a/packages/x-codemod/tsconfig.json
+++ b/packages/x-codemod/tsconfig.json
@@ -11,7 +11,8 @@
       "moment-timezone",
       "node"
     ],
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "skipLibCheck": true
   },
   "include": ["src/**/*"],
   "exclude": ["src/**/actual*.ts*"]
diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json
index c3c94e16b83bf..09cf9d7b0b063 100644
--- a/packages/x-data-grid-generator/package.json
+++ b/packages/x-data-grid-generator/package.json
@@ -40,8 +40,8 @@
     "lru-cache": "^11.0.2"
   },
   "devDependencies": {
-    "@mui/icons-material": "^5.16.11",
-    "@mui/material": "^5.16.11",
+    "@mui/icons-material": "^5.16.13",
+    "@mui/material": "^5.16.13",
     "@types/chance": "^1.1.6",
     "rimraf": "^6.0.1"
   },
diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json
index 4fa26e70b5c9d..47f1d361c3af4 100644
--- a/packages/x-data-grid-premium/package.json
+++ b/packages/x-data-grid-premium/package.json
@@ -73,8 +73,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@types/prop-types": "^15.7.14",
     "date-fns": "^2.30.0",
     "rimraf": "^6.0.1"
diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
index 6796a0d77af96..46760ef830109 100644
--- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
+++ b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
@@ -49,7 +49,7 @@ const AUTO_SCROLL_SENSITIVITY = 50; // The distance from the edge to start scrol
 const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the sensitivity area
 
 export const useGridCellSelection = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: Pick<
     DataGridPremiumProcessedProps,
     | 'cellSelection'
@@ -64,10 +64,10 @@ export const useGridCellSelection = (
 ) => {
   const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const visibleRows = useGridVisibleRows(apiRef, props);
-  const cellWithVirtualFocus = React.useRef<GridCellCoordinates | null>();
-  const lastMouseDownCell = React.useRef<GridCellCoordinates | null>();
-  const mousePosition = React.useRef<{ x: number; y: number } | null>(null);
-  const autoScrollRAF = React.useRef<number | null>();
+  const cellWithVirtualFocus = React.useRef<GridCellCoordinates>(null);
+  const lastMouseDownCell = React.useRef<GridCellCoordinates>(null);
+  const mousePosition = React.useRef<{ x: number; y: number }>(null);
+  const autoScrollRAF = React.useRef<number>(null);
   const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, props);
diff --git a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx
index 70df5ae9c3d59..789a91a953f10 100644
--- a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, act } from '@mui/internal-test-utils';
+import { createRenderer, act, waitFor } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import {
   DataGridPremium as DataGrid,
@@ -63,7 +63,7 @@ describe('<DataGrid /> - Quick filter', () => {
   }
 
   // https://github.com/mui/mui-x/issues/9677
-  it('should not fail when adding a grouping criterion', () => {
+  it('should not fail when adding a grouping criterion', async () => {
     const { setProps } = render(
       <TestCase
         rows={[
@@ -94,7 +94,7 @@ describe('<DataGrid /> - Quick filter', () => {
       />,
     );
 
-    act(() => apiRef.current.addRowGroupingCriteria('year'));
+    await act(() => apiRef.current.addRowGroupingCriteria('year'));
 
     setProps({
       filterModel: {
@@ -103,6 +103,6 @@ describe('<DataGrid /> - Quick filter', () => {
       },
     });
 
-    expect(getColumnValues(0)).to.deep.equal(['20th Century Fox (1)', '']);
+    await waitFor(() => expect(getColumnValues(0)).to.deep.equal(['20th Century Fox (1)', '']));
   });
 });
diff --git a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
index 1918719266a19..4d8604f27d128 100644
--- a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
@@ -88,14 +88,16 @@ describe('<DataGridPremium /> - Cell selection', () => {
   });
 
   describe('Ctrl + click', () => {
-    it('should add the clicked cells to the selection', () => {
-      render(<TestDataGridSelection />);
+    it('should add the clicked cells to the selection', async () => {
+      const { user } = render(<TestDataGridSelection />);
       expect(document.querySelector('.Mui-selected')).to.equal(null);
       const cell11 = getCell(1, 1);
-      fireEvent.click(cell11);
+      await user.click(cell11);
       expect(cell11).to.have.class('Mui-selected');
       const cell21 = getCell(2, 1);
-      fireEvent.click(cell21, { ctrlKey: true });
+      await user.keyboard('{Control>}');
+      await user.click(cell21);
+      await user.keyboard('{/Control}');
       expect(cell21).to.have.class('Mui-selected');
       expect(cell11).to.have.class('Mui-selected');
     });
@@ -187,14 +189,15 @@ describe('<DataGridPremium /> - Cell selection', () => {
       expect(spiedSelectCellsBetweenRange.lastCall.args[1]).to.deep.equal({ id: 1, field: 'id' });
     });
 
-    it('should call selectCellRange when ArrowUp is pressed', () => {
-      render(<TestDataGridSelection />);
+    it('should call selectCellRange when ArrowUp is pressed', async () => {
+      const { user } = render(<TestDataGridSelection />);
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(1, 0);
-      cell.focus();
-      fireUserEvent.mousePress(cell);
-      fireEvent.keyDown(cell, { key: 'Shift' });
-      fireEvent.keyDown(cell, { key: 'ArrowUp', shiftKey: true });
+      await act(() => {
+        cell.focus();
+      });
+      await user.click(cell);
+      await user.keyboard('{Shift>}{ArrowUp}{/Shift}');
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 1, field: 'id' });
       expect(spiedSelectCellsBetweenRange.lastCall.args[1]).to.deep.equal({ id: 0, field: 'id' });
     });
@@ -298,9 +301,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
         expect(getCell(2, 2)).to.have.class('Mui-selected');
       });
 
-      it('should select all cells within the given arguments if start > end', () => {
+      it('should select all cells within the given arguments if start > end', async () => {
         render(<TestDataGridSelection />);
-        act(() =>
+        await act(() =>
           apiRef.current.selectCellRange({ id: 0, field: 'id' }, { id: 2, field: 'price1M' }),
         );
 
diff --git a/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx
index b7e6c72fe40f0..7cb9dc712a09e 100644
--- a/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx
@@ -221,7 +221,10 @@ describe('<DataGridPremium /> - Export Excel', () => {
       }
       render(<Test />);
 
-      const workbook = await apiRef.current.getDataAsExcel();
+      let workbook: Excel.Workbook | null = null;
+      await act(async () => {
+        workbook = await apiRef.current.getDataAsExcel();
+      });
       const worksheet = workbook!.worksheets[0];
 
       // 1-based index + 1 for column header row
diff --git a/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx
index da9e7161db238..ae9a23cdbdbe3 100644
--- a/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx
@@ -120,19 +120,19 @@ describe('<DataGridPremium /> - Row selection', () => {
       ]);
     });
 
-    it('should deselect auto selected parent if one of the children is deselected', () => {
-      render(<Test defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should deselect auto selected parent if one of the children is deselected', async () => {
+      const { user } = render(<Test defaultGroupingExpansionDepth={-1} density="compact" />);
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
-      fireEvent.click(getCell(3, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(3, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([
         0,
         1,
         2,
         'auto-generated-row-category1/Cat A',
       ]);
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2]);
     });
 
diff --git a/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx
index 3ae5c92b250e4..647123bbca6f8 100644
--- a/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx
@@ -11,6 +11,7 @@ import {
 import { createRenderer, act } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { getColumnValues } from 'test/utils/helperFn';
+import { GridInitialStatePremium } from '../models/gridStatePremium';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -90,30 +91,40 @@ describe('<DataGridPremium /> - State persistence', () => {
       });
     });
 
-    it('should export the current version of the exportable state', () => {
+    it('should export the current version of the exportable state', async () => {
       render(<TestCase />);
-      act(() => apiRef.current.setRowGroupingModel(['category']));
-      act(() =>
+      await act(() => {
+        apiRef.current.setRowGroupingModel(['category']);
+      });
+      await act(() => {
         apiRef.current.setAggregationModel({
           id: 'size',
-        }),
-      );
+        });
+      });
 
-      const exportedState = apiRef.current.exportState();
+      let exportedState: GridInitialStatePremium = {};
+      await act(() => {
+        exportedState = apiRef.current.exportState();
+      });
       expect(exportedState.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping);
       expect(exportedState.aggregation).to.deep.equal(FULL_INITIAL_STATE.aggregation);
     });
 
-    it('should export the current version of the exportable state when using exportOnlyDirtyModels', () => {
+    it('should export the current version of the exportable state when using exportOnlyDirtyModels', async () => {
       render(<TestCase />);
-      act(() => apiRef.current.setRowGroupingModel(['category']));
-      act(() =>
+      await act(() => {
+        apiRef.current.setRowGroupingModel(['category']);
+      });
+      await act(() => {
         apiRef.current.setAggregationModel({
           id: 'size',
-        }),
-      );
+        });
+      });
 
-      const exportedState = apiRef.current.exportState({ exportOnlyDirtyModels: true });
+      let exportedState: GridInitialStatePremium = {};
+      await act(() => {
+        exportedState = apiRef.current.exportState({ exportOnlyDirtyModels: true });
+      });
       expect(exportedState.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping);
       expect(exportedState.aggregation).to.deep.equal(FULL_INITIAL_STATE.aggregation);
     });
diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json
index 1f1eb17a93aec..29243c13d2821 100644
--- a/packages/x-data-grid-pro/package.json
+++ b/packages/x-data-grid-pro/package.json
@@ -71,8 +71,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@types/prop-types": "^15.7.14",
     "rimraf": "^6.0.1"
   },
diff --git a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx
index f997b0c8d7f33..c423c5f58d566 100644
--- a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx
+++ b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx
@@ -89,7 +89,7 @@ import {
 import { useGridDataSourceLazyLoader } from '../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader';
 
 export const useDataGridProComponent = (
-  inputApiRef: React.MutableRefObject<GridApiPro> | undefined,
+  inputApiRef: React.RefObject<GridApiPro> | undefined,
   props: DataGridProProcessedProps,
 ) => {
   const apiRef = useGridInitialization<GridPrivateApiPro, GridApiPro>(inputApiRef, props);
diff --git a/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx
index db0e3dc99fdd3..0dc4f05c7c384 100644
--- a/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx
+++ b/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx
@@ -72,7 +72,7 @@ export const useGridColumnReorder = (
   });
   const originColumnIndex = React.useRef<number | null>(null);
   const forbiddenIndexes = React.useRef<{ [key: number]: boolean }>({});
-  const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const ownerState = { classes: props.classes };
   const classes = useUtilityClasses(ownerState);
   const isRtl = useRtl();
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 aed2941bc56a2..6cf77ff71c9ca 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
@@ -254,9 +254,9 @@ export const useGridDetailPanel = (
   useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCachesAndForceUpdate);
 
   const previousGetDetailPanelContentProp =
-    React.useRef<DataGridProProcessedProps['getDetailPanelContent']>();
+    React.useRef<DataGridProProcessedProps['getDetailPanelContent']>(null);
   const previousGetDetailPanelHeightProp =
-    React.useRef<DataGridProProcessedProps['getDetailPanelHeight']>();
+    React.useRef<DataGridProProcessedProps['getDetailPanelHeight']>(null);
 
   const updateCachesIfNeeded = React.useCallback(() => {
     if (
diff --git a/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx b/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx
index 9e38bde1833f4..0996a53562300 100644
--- a/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx
+++ b/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx
@@ -38,7 +38,7 @@ export const useGridInfiniteLoader = (
 ): void => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
-  const observer = React.useRef<IntersectionObserver>();
+  const observer = React.useRef<IntersectionObserver>(null);
   const updateTargetTimeout = useTimeout();
   const triggerElement = React.useRef<HTMLElement | null>(null);
 
diff --git a/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx
index 866dd4e242a59..6e906e370cae9 100644
--- a/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx
+++ b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx
@@ -62,7 +62,7 @@ export const useGridRowReorder = (
   const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const dragRowNode = React.useRef<HTMLElement | null>(null);
   const originRowIndex = React.useRef<number | null>(null);
-  const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const ownerState = { classes: props.classes };
   const classes = useUtilityClasses(ownerState);
   const [dragRowId, setDragRowId] = React.useState<GridRowId>('');
diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
index 2f65dfafabee0..a0bcce7ee09d3 100644
--- a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
@@ -54,9 +54,9 @@ describe('<DataGridPro /> - Cell editing', () => {
 
   describe('apiRef', () => {
     describe('startCellEditMode', () => {
-      it('should throw when the cell is already in edit mode', () => {
+      it('should throw when the cell is already in edit mode', async () => {
         render(<TestCase />);
-        act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
+        await act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(() => {
           apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' });
         }).to.throw('MUI X: The cell with id=0 and field=currencyPair is not in view mode.');
@@ -805,13 +805,13 @@ describe('<DataGridPro /> - Cell editing', () => {
         expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown');
       });
 
-      it(`should not publish 'cellEditStart' if space is pressed`, () => {
-        render(<TestCase autoHeight />);
+      it(`should not publish 'cellEditStart' if space is pressed`, async () => {
+        const { user } = render(<TestCase autoHeight />);
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        fireUserEvent.mousePress(cell);
-        fireEvent.keyDown(cell, { key: ' ' });
+        await user.click(cell);
+        await user.keyboard('[Space]');
         expect(listener.callCount).to.equal(0);
       });
     });
@@ -1167,15 +1167,15 @@ describe('<DataGridPro /> - Cell editing', () => {
     });
 
     describe('by pressing Tab', () => {
-      it(`should publish 'cellEditStop' with reason=tabKeyDown`, () => {
-        render(<TestCase />);
+      it(`should publish 'cellEditStop' with reason=tabKeyDown`, async () => {
+        const { user } = render(<TestCase />);
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStop', listener);
         const cell = getCell(0, 1);
-        fireUserEvent.mousePress(cell);
-        fireEvent.doubleClick(cell);
+        await user.click(cell);
+        await user.dblClick(cell);
         expect(listener.callCount).to.equal(0);
-        fireEvent.keyDown(cell, { key: 'Tab' });
+        await user.keyboard('{Tab}');
         expect(listener.lastCall.args[0].reason).to.equal('tabKeyDown');
       });
 
@@ -1255,9 +1255,9 @@ describe('<DataGridPro /> - Cell editing', () => {
         const { setProps } = render(
           <TestCase cellModesModel={{ 0: { currencyPair: { mode: GridCellModes.Edit } } }} />,
         );
-        await act(() =>
-          apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
-        );
+        await act(() => {
+          apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+        });
         setProps({
           cellModesModel: {
             0: { currencyPair: { mode: GridCellModes.View, cellToFocusAfter: 'below' } },
diff --git a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
index 448aa1d0c63ca..66a6efd68d318 100644
--- a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
@@ -261,15 +261,15 @@ describe('<DataGridPro /> - Column pinning', () => {
   });
 
   describe('props: onPinnedColumnsChange', () => {
-    it('should call when a column is pinned', () => {
+    it('should call when a column is pinned', async () => {
       const handlePinnedColumnsChange = spy();
       render(<TestCase onPinnedColumnsChange={handlePinnedColumnsChange} />);
-      act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
+      await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
       expect(handlePinnedColumnsChange.lastCall.args[0]).to.deep.equal({
         left: ['currencyPair'],
         right: [],
       });
-      act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.RIGHT));
+      await act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.RIGHT));
       expect(handlePinnedColumnsChange.lastCall.args[0]).to.deep.equal({
         left: ['currencyPair'],
         right: ['price17M'],
@@ -285,7 +285,7 @@ describe('<DataGridPro /> - Column pinning', () => {
         />,
       );
       expect($$(`[role="gridcell"].${gridClasses['cell--pinnedLeft']}`)).to.have.length(1);
-      act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.LEFT));
+      await act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.LEFT));
       await microtasks();
       expect($$(`[role="gridcell"].${gridClasses['cell--pinnedLeft']}`)).to.have.length(1);
       expect(handlePinnedColumnsChange.lastCall.args[0]).to.deep.equal({
@@ -296,7 +296,7 @@ describe('<DataGridPro /> - Column pinning', () => {
   });
 
   describe('prop: pinnedColumns', () => {
-    it('should pin the columns specified', () => {
+    it('should pin the columns specified', async () => {
       render(<TestCase pinnedColumns={{ left: ['currencyPair'] }} />);
       const cell = document.querySelector<HTMLDivElement>(
         `.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`,
@@ -304,12 +304,12 @@ describe('<DataGridPro /> - Column pinning', () => {
       expect(cell).not.to.equal(null);
     });
 
-    it("should not change the pinned columns if the prop didn't change", () => {
+    it("should not change the pinned columns if the prop didn't change", async () => {
       render(<TestCase pinnedColumns={{ left: ['currencyPair'] }} />);
       expect(
         document.querySelector(`.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`),
       ).not.to.equal(null);
-      act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.LEFT));
+      await act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.LEFT));
       expect(
         document.querySelector(`.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`),
       ).not.to.equal(null);
@@ -354,9 +354,9 @@ describe('<DataGridPro /> - Column pinning', () => {
       expect(cell).not.to.equal(null);
     });
 
-    it('should allow to pin column using `apiRef.current.pinColumn`', () => {
+    it('should allow to pin column using `apiRef.current.pinColumn`', async () => {
       render(<TestCase disableColumnPinning />);
-      act(() => apiRef.current.pinColumn('id', GridPinnedColumnPosition.LEFT));
+      await act(() => apiRef.current.pinColumn('id', GridPinnedColumnPosition.LEFT));
       const cell = document.querySelector<HTMLDivElement>(
         `.${gridClasses['cell--pinnedLeft']}[data-field="id"]`,
       )!;
@@ -382,55 +382,57 @@ describe('<DataGridPro /> - Column pinning', () => {
     it('should not crash if a non-existent column is pinned', () => {
       expect(() => {
         render(<TestCase initialState={{ pinnedColumns: { left: ['currency'] } }} />);
+      }).not.to.throw();
+      expect(() => {
         render(<TestCase initialState={{ pinnedColumns: { right: ['currency'] } }} />);
       }).not.to.throw();
     });
 
     describe('pinColumn', () => {
-      it('should pin the given column', () => {
+      it('should pin the given column', async () => {
         render(<TestCase />);
         expect($('[data-field="currencyPair"]')?.className).not.to.include('pinned');
-        act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
+        await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
         expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`)).not.to.equal(
           null,
         );
       });
 
-      it('should change the side when called on a pinned column', () => {
+      it('should change the side when called on a pinned column', async () => {
         render(<TestCase />);
 
         const renderZone = $(`.${gridClasses.virtualScrollerRenderZone}`)!;
 
         expect($(renderZone, '[data-field="currencyPair"]')!.className).not.to.include('pinned');
 
-        act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
+        await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
         expect(
           $(renderZone, `.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`),
         ).not.to.equal(null);
         expect($(renderZone, '[data-field="currencyPair"]')!.className).to.include('pinned');
 
-        act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.RIGHT));
+        await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.RIGHT));
         expect($$(renderZone, `.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0);
         expect(
           $(renderZone, `.${gridClasses['cell--pinnedRight']}[data-field="currencyPair"]`),
         ).not.to.equal(null);
       });
 
-      it('should not change the columns when called on a pinned column with the same side ', () => {
+      it('should not change the columns when called on a pinned column with the same side', async () => {
         render(<TestCase />);
-        act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
+        await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
         expect($$(`.${gridClasses['cell--pinnedLeft']}`)).to.have.length(1);
-        act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
+        await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
         expect($$(`.${gridClasses['cell--pinnedLeft']}`)).to.have.length(1);
       });
     });
 
     describe('unpinColumn', () => {
-      it('should unpin the given column', () => {
+      it('should unpin the given column', async () => {
         render(<TestCase />);
-        act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
+        await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
         expect($$(`.${gridClasses['cell--pinnedLeft']}`).length).not.to.equal(0);
-        act(() => apiRef.current.unpinColumn('currencyPair'));
+        await act(() => apiRef.current.unpinColumn('currencyPair'));
         expect($$(`.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0);
         const renderZone = $(`.${gridClasses.virtualScrollerRenderZone}`)!;
         expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
@@ -548,12 +550,14 @@ describe('<DataGridPro /> - Column pinning', () => {
       expect(getColumnHeadersTextContent()).to.deep.equal(['', 'id', 'Currency Pair', '1M', '2M']);
     });
 
-    it('should restore the position when unpinning a column added after the first pinned column', () => {
+    it('should restore the position when unpinning a column added after the first pinned column', async () => {
       const { setProps } = render(<TestCase nbCols={2} disableVirtualization />);
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair']);
       setProps({ pinnedColumns: { left: ['currencyPair'] } });
       expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id']);
-      act(() => apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]));
+      await act(() => {
+        apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]);
+      });
       expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id', 'foo', 'bar']);
       setProps({ pinnedColumns: { left: ['currencyPair', 'foo'] } });
       expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'foo', 'id', 'bar']);
@@ -561,12 +565,12 @@ describe('<DataGridPro /> - Column pinning', () => {
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair', 'foo', 'bar']);
     });
 
-    it('should restore the position of a column pinned before it is added', () => {
+    it('should restore the position of a column pinned before it is added', async () => {
       const { setProps } = render(
         <TestCase nbCols={2} pinnedColumns={{ left: ['foo'] }} disableVirtualization />,
       );
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair']);
-      act(() => apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]));
+      await act(() => apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]));
       expect(getColumnHeadersTextContent()).to.deep.equal(['foo', 'id', 'Currency Pair', 'bar']);
       setProps({ pinnedColumns: {} });
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair', 'foo', 'bar']);
@@ -588,12 +592,12 @@ describe('<DataGridPro /> - Column pinning', () => {
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'price1M']);
     });
 
-    it('should restore the position when the neighboring columns are reordered', () => {
+    it('should restore the position when the neighboring columns are reordered', async () => {
       const { setProps } = render(<TestCase nbCols={4} disableVirtualization />);
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair', '1M', '2M']); // price1M's index = 2
       setProps({ pinnedColumns: { left: ['price1M'] } });
       expect(getColumnHeadersTextContent()).to.deep.equal(['1M', 'id', 'Currency Pair', '2M']);
-      act(() => apiRef.current.setColumnIndex('id', 2));
+      await act(() => apiRef.current.setColumnIndex('id', 2));
       expect(getColumnHeadersTextContent()).to.deep.equal(['1M', 'Currency Pair', 'id', '2M']);
       setProps({ pinnedColumns: {} });
       expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id', '1M', '2M']); // price1M's index = 2
diff --git a/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx
index 180920eca159d..82340efbe43e2 100644
--- a/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx
@@ -51,7 +51,7 @@ describe('<DataGridPro /> - Columns reorder', () => {
   };
 
   it('resizing after columns reorder should respect the new columns order', async () => {
-    let apiRef: React.MutableRefObject<GridApi>;
+    let apiRef: React.RefObject<GridApi>;
 
     function TestCase(props: { width: number }) {
       const { width } = props;
@@ -66,14 +66,14 @@ describe('<DataGridPro /> - Columns reorder', () => {
     const { setProps } = render(<TestCase width={300} />);
 
     expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']);
-    act(() => apiRef.current.setColumnIndex('id', 1));
+    await act(() => apiRef.current.setColumnIndex('id', 1));
     setProps({ width: 200 });
     await raf();
     expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'id']);
   });
 
-  it('should not reset the column order when a prop change', () => {
-    let apiRef: React.MutableRefObject<GridApi>;
+  it('should not reset the column order when a prop change', async () => {
+    let apiRef: React.RefObject<GridApi>;
     const rows = [{ id: 0, brand: 'Nike' }];
     const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }];
 
@@ -89,7 +89,7 @@ describe('<DataGridPro /> - Columns reorder', () => {
 
     const { forceUpdate } = render(<Test />);
     expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'desc', 'type']);
-    act(() => apiRef.current.setColumnIndex('brand', 2));
+    await act(() => apiRef.current.setColumnIndex('brand', 2));
     expect(getColumnHeadersTextContent()).to.deep.equal(['desc', 'type', 'brand']);
     forceUpdate(); // test stability
     expect(getColumnHeadersTextContent()).to.deep.equal(['desc', 'type', 'brand']);
diff --git a/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx
index 6dcdef061528a..b7379576783cc 100644
--- a/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx
@@ -11,7 +11,6 @@ import {
 } from '@mui/x-data-grid-pro';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
 import { getCell, getRow } from 'test/utils/helperFn';
-import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DataGridPro/> - Components', () => {
   const { render } = createRenderer();
@@ -78,17 +77,17 @@ describe('<DataGridPro/> - Components', () => {
       });
     });
 
-    it(`should still publish the 'cellKeyDown' event when overriding the 'onKeyDown' prop in slots.cell`, () => {
+    it(`should still publish the 'cellKeyDown' event when overriding the 'onKeyDown' prop in slots.cell`, async () => {
       const propHandler = spy();
       const eventHandler = spy();
-      render(<TestCase slotProps={{ cell: { onKeyDown: propHandler } }} />);
+      const { user } = render(<TestCase slotProps={{ cell: { onKeyDown: propHandler } }} />);
       apiRef!.current.subscribeEvent('cellKeyDown', eventHandler);
 
       expect(propHandler.callCount).to.equal(0);
       expect(eventHandler.callCount).to.equal(0);
 
-      fireUserEvent.mousePress(getCell(0, 0));
-      fireEvent.keyDown(getCell(0, 0));
+      await user.click(getCell(0, 0));
+      await user.keyboard('a');
 
       expect(propHandler.callCount).to.equal(1);
       expect(propHandler.lastCall.args[0]).not.to.equal(undefined);
diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx
index 8ad3581a199fc..8d71f25c41366 100644
--- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMockServer } from '@mui/x-data-grid-generator';
-import { createRenderer, waitFor, fireEvent, within, act, screen } from '@mui/internal-test-utils';
+import { createRenderer, waitFor, within } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import {
   DataGridPro,
@@ -13,7 +13,7 @@ import {
   useGridApiRef,
 } from '@mui/x-data-grid-pro';
 import { SinonSpy, spy } from 'sinon';
-import { raf } from 'test/utils/helperFn';
+import { getCell } from 'test/utils/helperFn';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -129,17 +129,16 @@ describe('<DataGridPro /> - Data source tree data', () => {
   });
 
   it('should fetch nested data when clicking on a dropdown', async () => {
-    render(<TestDataSource />);
+    const { user } = render(<TestDataSource />);
 
+    expect(fetchRowsSpy.callCount).to.equal(1);
     await waitFor(() => {
-      expect(fetchRowsSpy.callCount).to.equal(1);
+      expect(Object.keys(apiRef.current.state.rows.tree).length).to.equal(10 + 1);
     });
-    await raf();
-    expect(Object.keys(apiRef.current.state.rows.tree).length).to.equal(10 + 1);
-    const dataRow1 = await screen.findByText((_, el) => el?.getAttribute('data-rowindex') === '0');
 
-    const cell11 = within(dataRow1).getAllByRole('gridcell')[0];
-    fireEvent.click(within(cell11).getByRole('button'));
+    const cell11 = getCell(0, 0);
+    await user.click(within(cell11).getByRole('button'));
+
     await waitFor(() => {
       expect(fetchRowsSpy.callCount).to.equal(2);
     });
@@ -152,27 +151,21 @@ describe('<DataGridPro /> - Data source tree data', () => {
 
   it('should fetch nested data when calling API method `unstable_dataSource.fetchRows`', async () => {
     render(<TestDataSource />);
+    expect(fetchRowsSpy.callCount).to.equal(1);
 
     await waitFor(() => {
-      expect(fetchRowsSpy.callCount).to.equal(1);
+      expect(Object.keys(apiRef.current.state.rows.tree).length).to.equal(10 + 1);
     });
-    await raf();
-
-    const tree = apiRef.current.state.rows.tree;
-    expect(Object.keys(tree).length).to.equal(10 + 1);
-    const dataRow1 = await screen.findByText((_, el) => el?.getAttribute('data-rowindex') === '0');
 
-    const cell11 = within(dataRow1).getAllByRole('gridcell')[0];
-    const firstChildId = (tree[GRID_ROOT_GROUP_ID] as GridGroupNode).children[0];
-    act(() => {
-      apiRef.current.unstable_dataSource.fetchRows(firstChildId);
-    });
-    await raf();
+    const firstChildId = (apiRef.current.state.rows.tree[GRID_ROOT_GROUP_ID] as GridGroupNode)
+      .children[0];
+    apiRef.current.unstable_dataSource.fetchRows(firstChildId);
 
     await waitFor(() => {
       expect(fetchRowsSpy.callCount).to.equal(2);
     });
 
+    const cell11 = getCell(0, 0);
     const cell11ChildrenCount = Number(cell11.innerText.split('(')[1].split(')')[0]);
     expect(Object.keys(apiRef.current.state.rows.tree).length).to.equal(
       10 + 1 + cell11ChildrenCount,
@@ -182,22 +175,19 @@ describe('<DataGridPro /> - Data source tree data', () => {
   it('should lazily fetch nested data when using `defaultGroupingExpansionDepth`', async () => {
     render(<TestDataSource defaultGroupingExpansionDepth={1} />);
 
-    // Initial fetch
+    expect(fetchRowsSpy.callCount).to.equal(1);
     await waitFor(() => {
-      expect(fetchRowsSpy.callCount).to.equal(1);
+      expect(apiRef.current.state.rows.groupsToFetch?.length).to.be.greaterThan(0);
     });
 
-    const groupsToFetch = apiRef.current.state.rows.groupsToFetch;
-    expect(groupsToFetch?.length).to.be.greaterThan(0);
-
-    const tree = apiRef.current.state.rows.tree;
-
     // All the group nodes belonging to the grid root group should be there for fetching
-    (tree[GRID_ROOT_GROUP_ID] as GridGroupNode).children.forEach((child) => {
-      const node = tree[child];
-      if (node.type === 'group') {
-        expect(groupsToFetch).to.include(child);
-      }
-    });
+    (apiRef.current.state.rows.tree[GRID_ROOT_GROUP_ID] as GridGroupNode).children.forEach(
+      (child) => {
+        const node = apiRef.current.state.rows.tree[child];
+        if (node.type === 'group') {
+          expect(apiRef.current.state.rows.groupsToFetch).to.include(child);
+        }
+      },
+    );
   });
 });
diff --git a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
index 13a12b4202762..27f4105824d40 100644
--- a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
@@ -271,14 +271,14 @@ describe('<DataGridPro /> - Detail panel', () => {
     expect(virtualScroller.scrollTop).to.equal(0);
   });
 
-  it('should toggle the detail panel when pressing Space on detail toggle cell', () => {
-    render(<TestCase getDetailPanelContent={() => <div>Detail</div>} />);
+  it('should toggle the detail panel when pressing Space on detail toggle cell', async () => {
+    const { user } = render(<TestCase getDetailPanelContent={() => <div>Detail</div>} />);
     expect(screen.queryByText('Detail')).to.equal(null);
     const cell = getCell(0, 0);
-    fireUserEvent.mousePress(cell);
-    fireEvent.keyDown(cell, { key: ' ' });
+    await user.click(cell);
+    await user.keyboard('[Space]');
     expect(screen.queryByText('Detail')).not.to.equal(null);
-    fireEvent.keyDown(cell, { key: ' ' });
+    await user.keyboard('[Space]');
     expect(screen.queryByText('Detail')).to.equal(null);
   });
 
@@ -298,9 +298,9 @@ describe('<DataGridPro /> - Detail panel', () => {
     expect(getCell(0, 1).firstChild).to.equal(screen.queryByRole('button', { name: 'Toggle' }));
   });
 
-  it('should cache the content of getDetailPanelContent', () => {
+  it('should cache the content of getDetailPanelContent', async () => {
     const getDetailPanelContent = spy(() => <div>Detail</div>);
-    const { setProps } = render(
+    const { setProps, user } = render(
       <TestCase
         columns={[{ field: 'brand' }]}
         rows={[
@@ -325,23 +325,23 @@ describe('<DataGridPro /> - Detail panel', () => {
     const expectedCallCount = reactMajor >= 19 ? 4 : 8;
 
     expect(getDetailPanelContent.callCount).to.equal(expectedCallCount);
-    fireEvent.click(screen.getByRole('button', { name: 'Expand' }));
+    await user.click(screen.getByRole('button', { name: 'Expand' }));
     expect(getDetailPanelContent.callCount).to.equal(expectedCallCount);
 
-    fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+    await user.click(screen.getByRole('button', { name: /next page/i }));
     expect(getDetailPanelContent.callCount).to.equal(expectedCallCount);
 
     const getDetailPanelContent2 = spy(() => <div>Detail</div>);
     setProps({ getDetailPanelContent: getDetailPanelContent2 });
-    fireEvent.click(screen.getByRole('button', { name: 'Expand' }));
+    await user.click(screen.getByRole('button', { name: 'Expand' }));
     expect(getDetailPanelContent2.callCount).to.equal(2); // Called 2x by the effect
-    fireEvent.click(screen.getByRole('button', { name: /previous page/i }));
+    await user.click(screen.getByRole('button', { name: /previous page/i }));
     expect(getDetailPanelContent2.callCount).to.equal(2);
   });
 
-  it('should cache the content of getDetailPanelHeight', () => {
+  it('should cache the content of getDetailPanelHeight', async () => {
     const getDetailPanelHeight = spy(() => 100);
-    const { setProps } = render(
+    const { setProps, user } = render(
       <TestCase
         columns={[{ field: 'brand' }]}
         rows={[
@@ -367,17 +367,17 @@ describe('<DataGridPro /> - Detail panel', () => {
     const expectedCallCount = reactMajor >= 19 ? 4 : 8;
 
     expect(getDetailPanelHeight.callCount).to.equal(expectedCallCount);
-    fireEvent.click(screen.getByRole('button', { name: 'Expand' }));
+    await user.click(screen.getByRole('button', { name: 'Expand' }));
     expect(getDetailPanelHeight.callCount).to.equal(expectedCallCount);
 
-    fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+    await user.click(screen.getByRole('button', { name: /next page/i }));
     expect(getDetailPanelHeight.callCount).to.equal(expectedCallCount);
 
     const getDetailPanelHeight2 = spy(() => 200);
     setProps({ getDetailPanelHeight: getDetailPanelHeight2 });
-    fireEvent.click(screen.getByRole('button', { name: 'Expand' }));
+    await user.click(screen.getByRole('button', { name: 'Expand' }));
     expect(getDetailPanelHeight2.callCount).to.equal(2); // Called 2x by the effect
-    fireEvent.click(screen.getByRole('button', { name: /previous page/i }));
+    await user.click(screen.getByRole('button', { name: /previous page/i }));
     expect(getDetailPanelHeight2.callCount).to.equal(2);
   });
 
@@ -443,9 +443,9 @@ describe('<DataGridPro /> - Detail panel', () => {
     expect(getDetailPanelHeight.lastCall.args[0].id).to.equal(0);
   });
 
-  it('should not select the row when opening the detail panel', () => {
+  it('should not select the row when opening the detail panel', async () => {
     const handleRowSelectionModelChange = spy();
-    render(
+    const { user } = render(
       <TestCase
         getDetailPanelContent={() => <div>Detail</div>}
         onRowSelectionModelChange={handleRowSelectionModelChange}
@@ -453,8 +453,7 @@ describe('<DataGridPro /> - Detail panel', () => {
       />,
     );
     expect(screen.queryByText('Detail')).to.equal(null);
-    const cell = getCell(1, 0);
-    fireUserEvent.mousePress(cell);
+    await user.click(getCell(1, 0));
     expect(handleRowSelectionModelChange.callCount).to.equal(0);
   });
 
@@ -542,23 +541,23 @@ describe('<DataGridPro /> - Detail panel', () => {
   });
 
   describe('prop: onDetailPanelsExpandedRowIds', () => {
-    it('should call when a row is expanded or closed', () => {
+    it('should call when a row is expanded or closed', async () => {
       const handleDetailPanelsExpandedRowIdsChange = spy();
-      render(
+      const { user } = render(
         <TestCase
           getDetailPanelContent={() => <div>Detail</div>}
           onDetailPanelExpandedRowIdsChange={handleDetailPanelsExpandedRowIdsChange}
         />,
       );
-      fireEvent.click(screen.getAllByRole('button', { name: 'Expand' })[0]); // Expand the 1st row
+      await user.click(screen.getAllByRole('button', { name: 'Expand' })[0]); // Expand the 1st row
       expect(handleDetailPanelsExpandedRowIdsChange.lastCall.args[0]).to.deep.equal(new Set([0]));
-      fireEvent.click(screen.getAllByRole('button', { name: 'Expand' })[0]); // Expand the 2nd row
+      await user.click(screen.getAllByRole('button', { name: 'Expand' })[0]); // Expand the 2nd row
       expect(handleDetailPanelsExpandedRowIdsChange.lastCall.args[0]).to.deep.equal(
         new Set([0, 1]),
       );
-      fireEvent.click(screen.getAllByRole('button', { name: 'Collapse' })[0]); // Close the 1st row
+      await user.click(screen.getAllByRole('button', { name: 'Collapse' })[0]); // Close the 1st row
       expect(handleDetailPanelsExpandedRowIdsChange.lastCall.args[0]).to.deep.equal(new Set([1]));
-      fireEvent.click(screen.getAllByRole('button', { name: 'Collapse' })[0]); // Close the 2nd row
+      await user.click(screen.getAllByRole('button', { name: 'Collapse' })[0]); // Close the 2nd row
       expect(handleDetailPanelsExpandedRowIdsChange.lastCall.args[0]).to.deep.equal(new Set([]));
     });
 
diff --git a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx
index cf60cc02141c3..09a10b8652fad 100644
--- a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx
@@ -232,12 +232,12 @@ describe('<DataGridPro /> - Edit components', () => {
       defaultData.columns = [{ field: 'createdAt', type: 'date', editable: true }];
     });
 
-    it('should call setEditCellValue with the value converted to Date', () => {
-      render(<TestCase />);
+    it('should call setEditCellValue with the value converted to Date', async () => {
+      const { user } = render(<TestCase />);
       const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue');
 
       const cell = getCell(0, 0);
-      fireEvent.doubleClick(cell);
+      await user.dblClick(cell);
 
       const input = cell.querySelector('input')!;
       expect(input.value).to.equal('2022-02-18');
@@ -353,12 +353,12 @@ describe('<DataGridPro /> - Edit components', () => {
       defaultData.columns = [{ field: 'createdAt', type: 'dateTime', editable: true }];
     });
 
-    it('should call setEditCellValue with the value converted to Date', () => {
-      render(<TestCase />);
+    it('should call setEditCellValue with the value converted to Date', async () => {
+      const { user } = render(<TestCase />);
       const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue');
 
       const cell = getCell(0, 0);
-      fireEvent.doubleClick(cell);
+      await user.dblClick(cell);
 
       const input = cell.querySelector('input')!;
       expect(input.value).to.equal('2022-02-18T14:30');
@@ -592,13 +592,16 @@ describe('<DataGridPro /> - Edit components', () => {
 
       defaultData.columns[0].renderEditCell = (params) => renderEditSingleSelectCell(params);
 
-      render(<TestCase processRowUpdate={processRowUpdate} />);
+      const { user } = render(<TestCase processRowUpdate={processRowUpdate} />);
 
       const cell = getCell(0, 0);
-      fireEvent.doubleClick(cell);
-      fireUserEvent.mousePress(screen.queryAllByRole('option')[1]);
+      await user.dblClick(cell);
+      await user.click(screen.queryAllByRole('option')[1]);
       await waitFor(() => expect(screen.queryByRole('listbox')).to.equal(null));
-      fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' });
+      await act(() => {
+        screen.getByRole('combobox').focus();
+      });
+      await user.keyboard('{Enter}');
       expect(screen.queryByRole('listbox')).to.equal(null);
 
       resolveCallback!();
diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
index 0605434f2a7e7..b63b6c91820b1 100644
--- a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
@@ -1241,13 +1241,13 @@ describe('<DataGridPro /> - Row editing', () => {
         expect(listener.lastCall.args[0].reason).to.equal('shiftTabKeyDown');
       });
 
-      it('should call stopRowEditMode with ignoreModifications=false and cellToFocusAfter=right', () => {
-        render(<TestCase />);
+      it('should call stopRowEditMode with ignoreModifications=false and cellToFocusAfter=right', async () => {
+        const { user } = render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 2);
-        fireUserEvent.mousePress(cell);
-        fireEvent.doubleClick(cell);
-        fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' });
+        await user.click(cell);
+        await user.dblClick(cell);
+        await user.keyboard('{Tab}');
         expect(spiedStopRowEditMode.callCount).to.equal(1);
         expect(spiedStopRowEditMode.lastCall.args[0]).to.deep.equal({
           id: 0,
@@ -1500,7 +1500,12 @@ describe('<DataGridPro /> - Row editing', () => {
       }, [hasFocus, inputRef]);
       return (
         <Portal>
-          <input ref={(ref) => setInputRef(ref)} data-testid="input" />
+          <input
+            ref={(ref) => {
+              setInputRef(ref);
+            }}
+            data-testid="input"
+          />
         </Portal>
       );
     }
diff --git a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
index 15f787bfdc454..dea9277b0605a 100644
--- a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
@@ -183,7 +183,7 @@ describe('<DataGridPro /> - Row pinning', () => {
 
   it('should update pinned rows when calling `apiRef.current.setPinnedRows` method', async () => {
     const data = getBasicGridData(20, 5);
-    let apiRef!: React.MutableRefObject<GridApi>;
+    let apiRef!: React.RefObject<GridApi>;
 
     function TestCase(props: any) {
       const [pinnedRow0, pinnedRow1, ...rows] = data.rows;
@@ -214,8 +214,8 @@ describe('<DataGridPro /> - Row pinning', () => {
     let rows = data.rows.filter((row) => row.id !== 11 && row.id !== 3);
 
     // should work when calling `setPinnedRows` before `setRows`
-    act(() => apiRef.current.unstable_setPinnedRows(pinnedRows));
-    act(() => apiRef.current.setRows(rows));
+    await act(() => apiRef.current.unstable_setPinnedRows(pinnedRows));
+    await act(() => apiRef.current.setRows(rows));
 
     expect(isRowPinned(getRowById(0), 'top')).to.equal(false, '#0 pinned top');
     expect(isRowPinned(getRowById(1), 'bottom')).to.equal(false, '#1 pinned bottom');
@@ -227,8 +227,8 @@ describe('<DataGridPro /> - Row pinning', () => {
     rows = data.rows.filter((row) => row.id !== 8 && row.id !== 5);
 
     // should work when calling `setPinnedRows` after `setRows`
-    act(() => apiRef.current.setRows(rows));
-    act(() => apiRef.current.unstable_setPinnedRows(pinnedRows));
+    await act(() => apiRef.current.setRows(rows));
+    await act(() => apiRef.current.unstable_setPinnedRows(pinnedRows));
 
     expect(isRowPinned(getRowById(11), 'top')).to.equal(false, '#11 pinned top');
     expect(isRowPinned(getRowById(3), 'bottom')).to.equal(false, '#3 pinned bottom');
@@ -277,20 +277,20 @@ describe('<DataGridPro /> - Row pinning', () => {
     expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned bottom');
   });
 
-  it('should not be impacted by sorting', () => {
-    render(<BaselineTestCase rowCount={5} colCount={5} />);
+  it('should not be impacted by sorting', async () => {
+    const { user } = render(<BaselineTestCase rowCount={5} colCount={5} />);
 
     expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top');
     expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned bottom');
     expect(getColumnValues(0)).to.deep.equal(['0', '2', '3', '4', '1']);
 
-    fireEvent.click(getColumnHeaderCell(0));
+    await user.click(getColumnHeaderCell(0));
 
     expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top');
     expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned bottom');
     expect(getColumnValues(0)).to.deep.equal(['0', '2', '3', '4', '1']);
 
-    fireEvent.click(getColumnHeaderCell(0));
+    await user.click(getColumnHeaderCell(0));
 
     expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top');
     expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned bottom');
@@ -339,7 +339,7 @@ describe('<DataGridPro /> - Row pinning', () => {
       return cell.parentElement!.getAttribute('data-id');
     }
 
-    it('should work with top pinned rows', () => {
+    it('should work with top pinned rows', async () => {
       function TestCase() {
         const data = getBasicGridData(20, 5);
         const [pinnedRow0, pinnedRow1, ...rows] = data.rows;
@@ -357,27 +357,24 @@ describe('<DataGridPro /> - Row pinning', () => {
         );
       }
 
-      render(<TestCase />);
+      const { user } = render(<TestCase />);
 
       expect(isRowPinned(getRowById(1), 'top')).to.equal(true, '#1 pinned top');
       expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top');
 
-      fireUserEvent.mousePress(getCell(0, 0));
+      await user.click(getCell(0, 0));
       // first top pinned row
       expect(getActiveCellRowId()).to.equal('1');
 
-      fireEvent.keyDown(getCell(0, 0), { key: 'ArrowDown' });
+      await user.keyboard('{ArrowDown}');
       // second top pinned row
       expect(getActiveCellRowId()).to.equal('0');
 
-      fireEvent.keyDown(getCell(1, 0), { key: 'ArrowDown' });
+      await user.keyboard('{ArrowDown}');
       // first non-pinned row
       expect(getActiveCellRowId()).to.equal('2');
 
-      fireEvent.keyDown(getCell(2, 0), { key: 'ArrowRight' });
-      fireEvent.keyDown(getCell(2, 1), { key: 'ArrowUp' });
-      fireEvent.keyDown(getCell(1, 1), { key: 'ArrowUp' });
-      fireEvent.keyDown(getCell(0, 1), { key: 'ArrowUp' });
+      await user.keyboard('{ArrowRight}{ArrowUp}{ArrowUp}{ArrowUp}');
       expect(getActiveColumnHeader()).to.equal('1');
     });
 
@@ -627,8 +624,8 @@ describe('<DataGridPro /> - Row pinning', () => {
     expect(cell.querySelector(`.${gridClasses.rowReorderCell}`)).to.equal(null);
   });
 
-  it('should keep pinned rows on page change', () => {
-    render(
+  it('should keep pinned rows on page change', async () => {
+    const { user } = render(
       <BaselineTestCase
         rowCount={20}
         colCount={5}
@@ -642,12 +639,12 @@ describe('<DataGridPro /> - Row pinning', () => {
     expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top');
     expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned bottom');
 
-    fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+    await user.click(screen.getByRole('button', { name: /next page/i }));
 
     expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top');
     expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned bottom');
 
-    fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+    await user.click(screen.getByRole('button', { name: /next page/i }));
 
     expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top');
     expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned bottom');
diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx
index 18df7ed58dfa6..fe2efabca606c 100644
--- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { getCell, getColumnValues, getRows } from 'test/utils/helperFn';
-import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils';
+import { createRenderer, screen, act, reactMajor, fireEvent } from '@mui/internal-test-utils';
 import {
   GridApi,
   useGridApiRef,
@@ -169,10 +169,10 @@ describe('<DataGridPro /> - Row selection', () => {
     );
   }
 
-  it('should keep the previously selected tree data parent selected if it becomes leaf after filtering', () => {
-    render(<TreeDataGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+  it('should keep the previously selected tree data parent selected if it becomes leaf after filtering', async () => {
+    const { user } = render(<TreeDataGrid defaultGroupingExpansionDepth={-1} density="compact" />);
 
-    fireEvent.click(
+    await user.click(
       screen.getByRole('checkbox', {
         name: /select all rows/i,
       }),
@@ -180,7 +180,7 @@ describe('<DataGridPro /> - Row selection', () => {
 
     expect(apiRef.current.getSelectedRows()).to.have.length(15);
 
-    act(() => {
+    await act(() => {
       apiRef.current.setFilterModel({
         items: [
           {
@@ -196,7 +196,7 @@ describe('<DataGridPro /> - Row selection', () => {
   });
 
   // Context: https://github.com/mui/mui-x/issues/15045
-  it('should not throw when using `isRowSelectable` and `keepNonExistentRowsSelected`', () => {
+  it('should not throw when using `isRowSelectable` and `keepNonExistentRowsSelected`', async () => {
     function TestDataGrid() {
       const [gridRows, setRows] = React.useState(rows);
       const onFilterChange = React.useCallback(
@@ -223,10 +223,10 @@ describe('<DataGridPro /> - Row selection', () => {
         />
       );
     }
-    render(<TestDataGrid />);
+    const { user } = render(<TestDataGrid />);
 
     // Select `Thomas`
-    fireEvent.click(
+    await user.click(
       screen.getAllByRole('checkbox', {
         name: /select row/i,
       })[1],
@@ -235,7 +235,7 @@ describe('<DataGridPro /> - Row selection', () => {
     expect(apiRef.current.getSelectedRows()).to.have.length(1);
     expect(Array.from(apiRef.current.getSelectedRows())[0][0]).to.equal(1);
 
-    act(() => {
+    await act(() => {
       apiRef.current.setFilterModel({
         items: [{ field: 'jobTitle', value: 'Head of Human Resources', operator: 'contains' }],
       });
@@ -246,23 +246,23 @@ describe('<DataGridPro /> - Row selection', () => {
   });
 
   // Context: https://github.com/mui/mui-x/issues/15068
-  it('should not call `onRowSelectionModelChange` when adding a new row', () => {
+  it('should not call `onRowSelectionModelChange` when adding a new row', async () => {
     const onRowSelectionModelChange = spy();
     const { setProps } = render(
       <TreeDataGrid onRowSelectionModelChange={onRowSelectionModelChange} />,
     );
 
-    act(() => {
+    await act(() => {
       setProps({ rows: [...rows, { id: 15, hierarchy: ['New'], jobTitle: 'Test Job' }] });
     });
 
     expect(onRowSelectionModelChange.callCount).to.equal(0);
   });
 
-  it('should put the parent into indeterminate if some but not all the children are selected', () => {
-    render(<TreeDataGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+  it('should put the parent into indeterminate if some but not all the children are selected', async () => {
+    const { user } = render(<TreeDataGrid defaultGroupingExpansionDepth={-1} density="compact" />);
 
-    fireEvent.click(getCell(2, 0).querySelector('input')!);
+    await user.click(getCell(2, 0).querySelector('input')!);
     expect(getCell(1, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true');
   });
 
@@ -283,8 +283,8 @@ describe('<DataGridPro /> - Row selection', () => {
   });
 
   describe('prop: checkboxSelectionVisibleOnly = false', () => {
-    it('should select all rows of all pages if no row is selected', () => {
-      render(
+    it('should select all rows of all pages if no row is selected', async () => {
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           initialState={{ pagination: { paginationModel: { pageSize: 2 } } }}
@@ -295,13 +295,13 @@ describe('<DataGridPro /> - Row selection', () => {
       const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', {
         name: /select all rows/i,
       });
-      fireEvent.click(selectAllCheckbox);
+      await user.click(selectAllCheckbox);
       expect(apiRef.current.getSelectedRows()).to.have.length(4);
       expect(selectAllCheckbox.checked).to.equal(true);
     });
 
-    it('should select all rows of all the pages if 1 row of another page is selected', () => {
-      render(
+    it('should select all rows of all the pages if 1 row of another page is selected', async () => {
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           initialState={{ pagination: { paginationModel: { pageSize: 2 } } }}
@@ -309,21 +309,21 @@ describe('<DataGridPro /> - Row selection', () => {
           pageSizeOptions={[2]}
         />,
       );
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0]);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(screen.getByRole('button', { name: /next page/i }));
       const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', {
         name: /select all rows/i,
       });
-      fireEvent.click(selectAllCheckbox);
+      await user.click(selectAllCheckbox);
       expect(apiRef.current.getSelectedRows()).to.have.length(4);
       expect(selectAllCheckbox.checked).to.equal(true);
     });
 
-    it('should select all visible rows if pagination is not enabled', () => {
+    it('should select all visible rows if pagination is not enabled', async () => {
       const rowLength = 10;
 
-      render(
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           checkboxSelectionVisibleOnly={false}
@@ -334,13 +334,13 @@ describe('<DataGridPro /> - Row selection', () => {
       const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', {
         name: /select all rows/i,
       });
-      fireEvent.click(selectAllCheckbox);
+      await user.click(selectAllCheckbox);
       expect(apiRef.current.getSelectedRows()).to.have.length(rowLength);
       expect(selectAllCheckbox.checked).to.equal(true);
     });
 
-    it('should set the header checkbox in a indeterminate state when some rows of other pages are not selected', () => {
-      render(
+    it('should set the header checkbox in a indeterminate state when some rows of other pages are not selected', async () => {
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           checkboxSelectionVisibleOnly={false}
@@ -354,20 +354,22 @@ describe('<DataGridPro /> - Row selection', () => {
         name: /select all rows/i,
       });
 
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
+      await user.click(screen.getByRole('button', { name: /next page/i }));
       expect(selectAllCheckbox).to.have.attr('data-indeterminate', 'true');
     });
 
-    it('should not select more than one row when disableMultipleRowSelection = true', () => {
-      render(<TestDataGridSelection checkboxSelection disableMultipleRowSelection />);
+    it('should not select more than one row when disableMultipleRowSelection = true', async () => {
+      const { user } = render(
+        <TestDataGridSelection checkboxSelection disableMultipleRowSelection />,
+      );
       const input1 = getCell(0, 0).querySelector('input')!;
-      fireEvent.click(input1);
+      await user.click(input1);
       expect(input1.checked).to.equal(true);
 
       const input2 = getCell(1, 0).querySelector('input')!;
-      fireEvent.click(input2);
+      await user.click(input2);
       expect(input1.checked).to.equal(false);
       expect(input2.checked).to.equal(true);
     });
@@ -384,8 +386,8 @@ describe('<DataGridPro /> - Row selection', () => {
       );
     });
 
-    it('should select all the rows of the current page if no row of the current page is selected', () => {
-      render(
+    it('should select all the rows of the current page if no row of the current page is selected', async () => {
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           checkboxSelectionVisibleOnly
@@ -395,19 +397,19 @@ describe('<DataGridPro /> - Row selection', () => {
         />,
       );
 
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0]);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(screen.getByRole('button', { name: /next page/i }));
       const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', {
         name: /select all rows/i,
       });
-      fireEvent.click(selectAllCheckbox);
+      await user.click(selectAllCheckbox);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2, 3]);
       expect(selectAllCheckbox.checked).to.equal(true);
     });
 
-    it('should select all the rows of the current page if 1 row of the current page is selected', () => {
-      render(
+    it('should select all the rows of the current page if 1 row of the current page is selected', async () => {
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           initialState={{ pagination: { paginationModel: { pageSize: 2 } } }}
@@ -417,21 +419,21 @@ describe('<DataGridPro /> - Row selection', () => {
         />,
       );
 
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0]);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(getCell(2, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2]);
       const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', {
         name: /select all rows/i,
       });
-      fireEvent.click(selectAllCheckbox);
+      await user.click(selectAllCheckbox);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2, 3]);
       expect(selectAllCheckbox.checked).to.equal(true);
     });
 
-    it('should not set the header checkbox in a indeterminate state when some rows of other pages are not selected', () => {
-      render(
+    it('should not set the header checkbox in a indeterminate state when some rows of other pages are not selected', async () => {
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           initialState={{ pagination: { paginationModel: { pageSize: 2 } } }}
@@ -440,16 +442,16 @@ describe('<DataGridPro /> - Row selection', () => {
         />,
       );
 
-      fireEvent.click(getCell(0, 0));
-      fireEvent.click(getCell(1, 0));
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(getCell(0, 0));
+      await user.click(getCell(1, 0));
+      await user.click(screen.getByRole('button', { name: /next page/i }));
       const selectAllCheckbox = screen.getByRole('checkbox', {
         name: /select all rows/i,
       });
       expect(selectAllCheckbox).to.have.attr('data-indeterminate', 'false');
     });
 
-    it('should allow to select all the current page rows when props.paginationMode="server"', () => {
+    it('should allow to select all the current page rows when props.paginationMode="server"', async () => {
       function TestDataGridSelectionServerSide({
         rowLength = 4,
       }: Omit<DataGridProProps, 'rows' | 'columns' | 'apiRef'> &
@@ -480,19 +482,19 @@ describe('<DataGridPro /> - Row selection', () => {
           </div>
         );
       }
-      render(<TestDataGridSelectionServerSide />);
+      const { user } = render(<TestDataGridSelectionServerSide />);
 
       const selectAllCheckbox = screen.getByRole('checkbox', {
         name: /select all rows/i,
       });
 
-      fireEvent.click(selectAllCheckbox);
+      await user.click(selectAllCheckbox);
       expect(apiRef.current.getSelectedRows()).to.have.length(2);
     });
 
     // https://github.com/mui/mui-x/issues/14074
-    it('should select all the rows of the current page keeping the previously selected rows when a filter is applied', () => {
-      render(
+    it('should select all the rows of the current page keeping the previously selected rows when a filter is applied', async () => {
+      const { user } = render(
         <TestDataGridSelection
           rowLength={50}
           checkboxSelection
@@ -516,13 +518,13 @@ describe('<DataGridPro /> - Row selection', () => {
         />,
       );
 
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0]);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(screen.getByRole('button', { name: /next page/i }));
       const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', {
         name: /select all rows/i,
       });
-      fireEvent.click(selectAllCheckbox);
+      await user.click(selectAllCheckbox);
       expect(apiRef.current.getSelectedRows()).to.have.keys([0, 3, 4]);
       expect(selectAllCheckbox.checked).to.equal(true);
     });
@@ -547,65 +549,71 @@ describe('<DataGridPro /> - Row selection', () => {
       expect(onRowSelectionModelChange.callCount).to.equal(0);
     });
 
-    it('should select the parent only when selecting it', () => {
-      render(<SelectionPropagationGrid />);
+    it('should select the parent only when selecting it', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1]);
     });
 
-    it('should deselect the parent only when deselecting it', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should deselect the parent only when deselecting it', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2]);
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([2]);
     });
 
-    it('should not auto select the parent if all the children are selected', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should not auto select the parent if all the children are selected', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
-      fireEvent.click(getCell(3, 0).querySelector('input')!);
-      fireEvent.click(getCell(4, 0).querySelector('input')!);
-      fireEvent.click(getCell(5, 0).querySelector('input')!);
-      fireEvent.click(getCell(6, 0).querySelector('input')!);
-      fireEvent.click(getCell(7, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(3, 0).querySelector('input')!);
+      await user.click(getCell(4, 0).querySelector('input')!);
+      await user.click(getCell(5, 0).querySelector('input')!);
+      await user.click(getCell(6, 0).querySelector('input')!);
+      await user.click(getCell(7, 0).querySelector('input')!);
       // The parent row (Thomas, id: 1) should not be among the selected rows
       expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]);
     });
 
-    it('should not deselect selected parent if one of the children is deselected', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should not deselect selected parent if one of the children is deselected', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
-      fireEvent.click(getCell(3, 0).querySelector('input')!);
-      fireEvent.click(getCell(4, 0).querySelector('input')!);
-      fireEvent.click(getCell(5, 0).querySelector('input')!);
-      fireEvent.click(getCell(6, 0).querySelector('input')!);
-      fireEvent.click(getCell(7, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(3, 0).querySelector('input')!);
+      await user.click(getCell(4, 0).querySelector('input')!);
+      await user.click(getCell(5, 0).querySelector('input')!);
+      await user.click(getCell(6, 0).querySelector('input')!);
+      await user.click(getCell(7, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
       // The parent row (Thomas, id: 1) should still be among the selected rows
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]);
     });
 
-    it('should select only the unwrapped rows when clicking "Select All" checkbox', () => {
-      render(<SelectionPropagationGrid />);
+    it('should select only the unwrapped rows when clicking "Select All" checkbox', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+      await user.click(screen.getByRole('checkbox', { name: /select all rows/i }));
       expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 8]);
     });
 
-    it('should deselect only the unwrapped rows when clicking "Select All" checkbox', () => {
-      render(<SelectionPropagationGrid />);
+    it('should deselect only the unwrapped rows when clicking "Select All" checkbox', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+      await user.click(screen.getByRole('checkbox', { name: /select all rows/i }));
       expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 8]);
-      fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+      await user.click(screen.getByRole('checkbox', { name: /select all rows/i }));
       expect(apiRef.current.getSelectedRows().size).to.equal(0);
     });
   });
@@ -617,58 +625,62 @@ describe('<DataGridPro /> - Row selection', () => {
       );
     }
 
-    it('should select all the children when selecting a parent', () => {
-      render(<SelectionPropagationGrid />);
+    it('should select all the children when selecting a parent', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
     });
 
-    it('should deselect all the children when deselecting a parent', () => {
-      render(<SelectionPropagationGrid />);
+    it('should deselect all the children when deselecting a parent', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows().size).to.equal(0);
     });
 
-    it('should not auto select the parent if all the children are selected', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should not auto select the parent if all the children are selected', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
-      fireEvent.click(getCell(3, 0).querySelector('input')!);
-      fireEvent.click(getCell(4, 0).querySelector('input')!);
-      fireEvent.click(getCell(5, 0).querySelector('input')!);
-      fireEvent.click(getCell(6, 0).querySelector('input')!);
-      fireEvent.click(getCell(7, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(3, 0).querySelector('input')!);
+      await user.click(getCell(4, 0).querySelector('input')!);
+      await user.click(getCell(5, 0).querySelector('input')!);
+      await user.click(getCell(6, 0).querySelector('input')!);
+      await user.click(getCell(7, 0).querySelector('input')!);
       // The parent row (Thomas, id: 1) should not be among the selected rows
       expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]);
     });
 
-    it('should not deselect selected parent if one of the children is deselected', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should not deselect selected parent if one of the children is deselected', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
       // The parent row (Thomas, id: 1) should still be among the selected rows
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]);
     });
 
-    it('should select all the nested rows when clicking "Select All" checkbox', () => {
-      render(<SelectionPropagationGrid />);
+    it('should select all the nested rows when clicking "Select All" checkbox', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+      await user.click(screen.getByRole('checkbox', { name: /select all rows/i }));
       expect(apiRef.current.getSelectedRows().size).to.equal(15);
     });
 
-    it('should deselect all the nested rows when clicking "Select All" checkbox', () => {
-      render(<SelectionPropagationGrid />);
+    it('should deselect all the nested rows when clicking "Select All" checkbox', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+      await user.click(screen.getByRole('checkbox', { name: /select all rows/i }));
       expect(apiRef.current.getSelectedRows().size).to.equal(15);
-      fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+      await user.click(screen.getByRole('checkbox', { name: /select all rows/i }));
       expect(apiRef.current.getSelectedRows().size).to.equal(0);
     });
 
@@ -686,8 +698,8 @@ describe('<DataGridPro /> - Row selection', () => {
         expect(apiRef.current.getSelectedRows().size).to.equal(0);
       });
 
-      it('should not auto-select a descendant if not allowed', () => {
-        render(
+      it('should not auto-select a descendant if not allowed', async () => {
+        const { user } = render(
           <SelectionPropagationGrid
             defaultGroupingExpansionDepth={-1}
             density="compact"
@@ -695,7 +707,7 @@ describe('<DataGridPro /> - Row selection', () => {
           />,
         );
 
-        fireEvent.click(getCell(1, 0).querySelector('input')!);
+        await user.click(getCell(1, 0).querySelector('input')!);
         expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]);
       });
     });
@@ -717,58 +729,64 @@ describe('<DataGridPro /> - Row selection', () => {
         />,
       );
 
-      expect(onRowSelectionModelChange.callCount).to.equal(2); // Dev mode calls twice
+      expect(onRowSelectionModelChange.callCount).to.equal(reactMajor < 19 ? 2 : 1); // Dev mode calls twice on React 18
       expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([2, 3, 4, 5, 6, 7, 1]);
     });
 
-    it('should select the parent only when selecting it', () => {
-      render(<SelectionPropagationGrid />);
+    it('should select the parent only when selecting it', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1]);
     });
 
-    it('should deselect the parent only when deselecting it', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should deselect the parent only when deselecting it', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2]);
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([2]);
     });
 
-    it('should auto select the parent if all the children are selected', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should auto select the parent if all the children are selected', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
-      fireEvent.click(getCell(3, 0).querySelector('input')!);
-      fireEvent.click(getCell(4, 0).querySelector('input')!);
-      fireEvent.click(getCell(5, 0).querySelector('input')!);
-      fireEvent.click(getCell(6, 0).querySelector('input')!);
-      fireEvent.click(getCell(7, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(3, 0).querySelector('input')!);
+      await user.click(getCell(4, 0).querySelector('input')!);
+      await user.click(getCell(5, 0).querySelector('input')!);
+      await user.click(getCell(6, 0).querySelector('input')!);
+      await user.click(getCell(7, 0).querySelector('input')!);
       // The parent row (Thomas, id: 1) should be among the selected rows
       expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7, 1]);
     });
 
-    it('should deselect selected parent if one of the children is deselected', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should deselect selected parent if one of the children is deselected', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
-      fireEvent.click(getCell(3, 0).querySelector('input')!);
-      fireEvent.click(getCell(4, 0).querySelector('input')!);
-      fireEvent.click(getCell(5, 0).querySelector('input')!);
-      fireEvent.click(getCell(6, 0).querySelector('input')!);
-      fireEvent.click(getCell(7, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(3, 0).querySelector('input')!);
+      await user.click(getCell(4, 0).querySelector('input')!);
+      await user.click(getCell(5, 0).querySelector('input')!);
+      await user.click(getCell(6, 0).querySelector('input')!);
+      await user.click(getCell(7, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7, 1]);
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
       // The parent row (Thomas, id: 1) should not be among the selected rows
       expect(apiRef.current.getSelectedRows()).to.have.keys([3, 4, 5, 6, 7]);
     });
 
     describe('prop: isRowSelectable', () => {
-      it('should not auto select a parent if not allowed', () => {
-        render(
+      it('should not auto select a parent if not allowed', async () => {
+        const { user } = render(
           <SelectionPropagationGrid
             defaultGroupingExpansionDepth={-1}
             density="compact"
@@ -776,12 +794,12 @@ describe('<DataGridPro /> - Row selection', () => {
           />,
         );
 
-        fireEvent.click(getCell(2, 0).querySelector('input')!);
-        fireEvent.click(getCell(3, 0).querySelector('input')!);
-        fireEvent.click(getCell(4, 0).querySelector('input')!);
-        fireEvent.click(getCell(5, 0).querySelector('input')!);
-        fireEvent.click(getCell(6, 0).querySelector('input')!);
-        fireEvent.click(getCell(7, 0).querySelector('input')!);
+        await user.click(getCell(2, 0).querySelector('input')!);
+        await user.click(getCell(3, 0).querySelector('input')!);
+        await user.click(getCell(4, 0).querySelector('input')!);
+        await user.click(getCell(5, 0).querySelector('input')!);
+        await user.click(getCell(6, 0).querySelector('input')!);
+        await user.click(getCell(7, 0).querySelector('input')!);
         // The parent row (Thomas, id: 1) should still not be among the selected rows
         expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]);
       });
@@ -795,61 +813,67 @@ describe('<DataGridPro /> - Row selection', () => {
       );
     }
 
-    it('should select all the children when selecting a parent', () => {
-      render(<SelectionPropagationGrid />);
+    it('should select all the children when selecting a parent', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
     });
 
-    it('should deselect all the children when deselecting a parent', () => {
-      render(<SelectionPropagationGrid />);
+    it('should deselect all the children when deselecting a parent', async () => {
+      const { user } = render(<SelectionPropagationGrid />);
 
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows().size).to.equal(0);
     });
 
-    it('should auto select the parent if all the children are selected', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should auto select the parent if all the children are selected', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(9, 0).querySelector('input')!);
-      fireEvent.click(getCell(11, 0).querySelector('input')!);
-      fireEvent.click(getCell(12, 0).querySelector('input')!);
+      await user.click(getCell(9, 0).querySelector('input')!);
+      await user.click(getCell(11, 0).querySelector('input')!);
+      await user.click(getCell(12, 0).querySelector('input')!);
 
       // The parent row (Mary, id: 8) should be among the selected rows
       expect(apiRef.current.getSelectedRows()).to.have.keys([9, 10, 11, 12, 8, 13, 14]);
     });
 
-    it('should deselect auto selected parent if one of the children is deselected', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should deselect auto selected parent if one of the children is deselected', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(9, 0).querySelector('input')!);
-      fireEvent.click(getCell(11, 0).querySelector('input')!);
-      fireEvent.click(getCell(12, 0).querySelector('input')!);
+      await user.click(getCell(9, 0).querySelector('input')!);
+      await user.click(getCell(11, 0).querySelector('input')!);
+      await user.click(getCell(12, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([9, 10, 11, 12, 8, 13, 14]);
-      fireEvent.click(getCell(9, 0).querySelector('input')!);
+      await user.click(getCell(9, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([11, 12, 13, 14]);
     });
 
-    it('should select all the children when selecting an indeterminate parent', () => {
-      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
+    it('should select all the children when selecting an indeterminate parent', async () => {
+      const { user } = render(
+        <SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />,
+      );
 
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(getCell(2, 0).querySelector('input')!);
       expect(getCell(1, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true');
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
     });
 
     describe('prop: keepNonExistentRowsSelected = true', () => {
-      it('should keep non-existent rows selected on filtering', () => {
-        render(<SelectionPropagationGrid keepNonExistentRowsSelected />);
+      it('should keep non-existent rows selected on filtering', async () => {
+        const { user } = render(<SelectionPropagationGrid keepNonExistentRowsSelected />);
 
-        fireEvent.click(getCell(1, 0).querySelector('input')!);
+        await user.click(getCell(1, 0).querySelector('input')!);
         expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
 
-        act(() => {
+        await act(() => {
           apiRef.current.setFilterModel({
             items: [
               {
@@ -861,7 +885,7 @@ describe('<DataGridPro /> - Row selection', () => {
           });
         });
 
-        fireEvent.click(getCell(0, 0).querySelector('input')!);
+        await user.click(getCell(0, 0).querySelector('input')!);
 
         expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 2, 3, 4, 5, 6, 7]);
       });
@@ -869,7 +893,7 @@ describe('<DataGridPro /> - Row selection', () => {
   });
 
   describe('apiRef: getSelectedRows', () => {
-    it('should handle the event internally before triggering onRowSelectionModelChange', () => {
+    it('should handle the event internally before triggering onRowSelectionModelChange', async () => {
       render(
         <TestDataGridSelection
           onRowSelectionModelChange={(model) => {
@@ -879,7 +903,7 @@ describe('<DataGridPro /> - Row selection', () => {
         />,
       );
       expect(apiRef.current.getSelectedRows()).to.have.length(0);
-      act(() => apiRef.current.selectRow(1));
+      await act(() => apiRef.current.selectRow(1));
       expect(apiRef.current.getSelectedRows().get(1)).to.deep.equal({
         id: 1,
         currencyPair: 'USDEUR',
@@ -888,10 +912,10 @@ describe('<DataGridPro /> - Row selection', () => {
   });
 
   describe('apiRef: isRowSelected', () => {
-    it('should check if the rows selected by clicking on the rows are selected', () => {
-      render(<TestDataGridSelection />);
+    it('should check if the rows selected by clicking on the rows are selected', async () => {
+      const { user } = render(<TestDataGridSelection />);
 
-      fireEvent.click(getCell(1, 0));
+      await user.click(getCell(1, 0));
 
       expect(apiRef.current.isRowSelected(0)).to.equal(false);
       expect(apiRef.current.isRowSelected(1)).to.equal(true);
@@ -906,22 +930,22 @@ describe('<DataGridPro /> - Row selection', () => {
   });
 
   describe('apiRef: selectRow', () => {
-    it('should call onRowSelectionModelChange with the ids selected', () => {
+    it('should call onRowSelectionModelChange with the ids selected', async () => {
       const handleRowSelectionModelChange = spy();
       render(<TestDataGridSelection onRowSelectionModelChange={handleRowSelectionModelChange} />);
-      act(() => apiRef.current.selectRow(1));
+      await act(() => apiRef.current.selectRow(1));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1]);
       // Reset old selection
-      act(() => apiRef.current.selectRow(2, true, true));
+      await act(() => apiRef.current.selectRow(2, true, true));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([2]);
       // Keep old selection
-      act(() => apiRef.current.selectRow(3));
+      await act(() => apiRef.current.selectRow(3));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([2, 3]);
-      act(() => apiRef.current.selectRow(3, false));
+      await act(() => apiRef.current.selectRow(3, false));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([2]);
     });
 
-    it('should not call onRowSelectionModelChange if the row is unselectable', () => {
+    it('should not call onRowSelectionModelChange if the row is unselectable', async () => {
       const handleRowSelectionModelChange = spy();
       render(
         <TestDataGridSelection
@@ -929,15 +953,15 @@ describe('<DataGridPro /> - Row selection', () => {
           onRowSelectionModelChange={handleRowSelectionModelChange}
         />,
       );
-      act(() => apiRef.current.selectRow(0));
+      await act(() => apiRef.current.selectRow(0));
       expect(handleRowSelectionModelChange.callCount).to.equal(0);
-      act(() => apiRef.current.selectRow(1));
+      await act(() => apiRef.current.selectRow(1));
       expect(handleRowSelectionModelChange.callCount).to.equal(1);
     });
   });
 
   describe('apiRef: selectRows', () => {
-    it('should call onRowSelectionModelChange with the ids selected', () => {
+    it('should call onRowSelectionModelChange with the ids selected', async () => {
       const handleRowSelectionModelChange = spy();
       render(
         <TestDataGridSelection
@@ -946,21 +970,21 @@ describe('<DataGridPro /> - Row selection', () => {
         />,
       );
 
-      act(() => apiRef.current.selectRows([1, 2]));
+      await act(() => apiRef.current.selectRows([1, 2]));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2]);
 
-      act(() => apiRef.current.selectRows([3]));
+      await act(() => apiRef.current.selectRows([3]));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2, 3]);
 
-      act(() => apiRef.current.selectRows([1, 2], false));
+      await act(() => apiRef.current.selectRows([1, 2], false));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([3]);
 
       // Deselect others
-      act(() => apiRef.current.selectRows([4, 5], true, true));
+      await act(() => apiRef.current.selectRows([4, 5], true, true));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([4, 5]);
     });
 
-    it('should filter out unselectable rows before calling onRowSelectionModelChange', () => {
+    it('should filter out unselectable rows before calling onRowSelectionModelChange', async () => {
       const handleRowSelectionModelChange = spy();
       render(
         <TestDataGridSelection
@@ -968,96 +992,102 @@ describe('<DataGridPro /> - Row selection', () => {
           onRowSelectionModelChange={handleRowSelectionModelChange}
         />,
       );
-      act(() => apiRef.current.selectRows([0, 1, 2]));
+      await act(() => apiRef.current.selectRows([0, 1, 2]));
       expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2]);
     });
 
-    it('should not select a range of several elements when disableMultipleRowSelection = true', () => {
+    it('should not select a range of several elements when disableMultipleRowSelection = true', async () => {
       render(<TestDataGridSelection disableMultipleRowSelection />);
 
-      act(() => apiRef.current.selectRows([0, 1, 2], true));
+      await act(() => apiRef.current.selectRows([0, 1, 2], true));
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
   });
 
   describe('apiRef: selectRowRange', () => {
-    it('should select all the rows in the range', () => {
+    it('should select all the rows in the range', async () => {
       render(<TestDataGridSelection />);
 
-      act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
+      await act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
       expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]);
     });
 
-    it('should unselect all the rows in the range', () => {
+    it('should unselect all the rows in the range', async () => {
       render(<TestDataGridSelection />);
 
-      act(() => apiRef.current.setRowSelectionModel([2, 3]));
+      await act(() => apiRef.current.setRowSelectionModel([2, 3]));
       expect(getSelectedRowIds()).to.deep.equal([2, 3]);
-      act(() => apiRef.current.selectRowRange({ startId: 0, endId: 3 }, false));
+      await act(() => apiRef.current.selectRowRange({ startId: 0, endId: 3 }, false));
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
 
-    it('should not unselect the selected elements if the range is to be selected', () => {
+    it('should not unselect the selected elements if the range is to be selected', async () => {
       render(<TestDataGridSelection />);
 
-      act(() => {
+      await act(() => {
         apiRef.current.setRowSelectionModel([2]);
+      });
+      await act(() => {
         apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true);
       });
       expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]);
     });
 
-    it('should not reset the other selections when resetSelection = false', () => {
+    it('should not reset the other selections when resetSelection = false', async () => {
       render(<TestDataGridSelection />);
 
-      act(() => {
+      await act(() => {
         apiRef.current.setRowSelectionModel([0]);
+      });
+      await act(() => {
         apiRef.current.selectRowRange({ startId: 2, endId: 3 }, true, false);
       });
       expect(getSelectedRowIds()).to.deep.equal([0, 2, 3]);
     });
 
-    it('should reset the other selections when resetSelection = true', () => {
+    it('should reset the other selections when resetSelection = true', async () => {
       render(<TestDataGridSelection />);
 
-      act(() => {
+      await act(() => {
         apiRef.current.setRowSelectionModel([0]);
+      });
+      await act(() => {
         apiRef.current.selectRowRange({ startId: 2, endId: 3 }, true, true);
       });
       expect(getSelectedRowIds()).to.deep.equal([2, 3]);
     });
 
-    it('should not select unselectable rows inside the range', () => {
+    it('should not select unselectable rows inside the range', async () => {
       render(<TestDataGridSelection isRowSelectable={(params) => Number(params.id) % 2 === 1} />);
 
-      act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
+      await act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
       expect(getSelectedRowIds()).to.deep.equal([1, 3]);
     });
 
-    it('should not select a range of several elements when disableMultipleRowSelection = true', () => {
+    it('should not select a range of several elements when disableMultipleRowSelection = true', async () => {
       render(<TestDataGridSelection disableMultipleRowSelection />);
 
-      act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
+      await act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
 
-    it('should select only filtered rows selecting a range', () => {
+    it('should select only filtered rows selecting a range', async () => {
       render(
         <TestDataGridSelection
           filterModel={{ items: [{ field: 'id', value: 1, operator: '!=' }] }}
         />,
       );
-      act(() => apiRef.current.selectRowRange({ startId: 0, endId: 2 }, true));
+      await act(() => apiRef.current.selectRowRange({ startId: 0, endId: 2 }, true));
       expect(getSelectedRowIds()).to.deep.equal([0, 2]);
     });
   });
 
-  it('should select only filtered rows after filter is applied', () => {
-    render(<TestDataGridSelection checkboxSelection />);
+  it('should select only filtered rows after filter is applied', async () => {
+    const { user } = render(<TestDataGridSelection checkboxSelection />);
     const selectAll = screen.getByRole('checkbox', {
       name: /select all rows/i,
     });
-    act(() =>
+    await act(() =>
       apiRef.current.setFilterModel({
         items: [
           {
@@ -1069,13 +1099,13 @@ describe('<DataGridPro /> - Row selection', () => {
       }),
     );
     expect(getColumnValues(1)).to.deep.equal(['0', '1']);
-    fireEvent.click(selectAll);
+    await user.click(selectAll);
     expect(getSelectedRowIds()).to.deep.equal([0, 1]);
-    fireEvent.click(selectAll);
+    await user.click(selectAll);
     expect(getSelectedRowIds()).to.deep.equal([]);
-    fireEvent.click(selectAll);
+    await user.click(selectAll);
     expect(getSelectedRowIds()).to.deep.equal([0, 1]);
-    fireEvent.click(selectAll);
+    await user.click(selectAll);
     expect(getSelectedRowIds()).to.deep.equal([]);
   });
 
diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json
index f9406efc59189..2e528b811c7e6 100644
--- a/packages/x-data-grid/package.json
+++ b/packages/x-data-grid/package.json
@@ -72,9 +72,9 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
-    "@mui/types": "^7.2.15",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
+    "@mui/types": "^7.2.20",
     "@types/prop-types": "^15.7.14",
     "rimraf": "^6.0.1"
   },
diff --git a/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx b/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx
index 2c888c05b2384..827f1e48b6d8a 100644
--- a/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx
+++ b/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx
@@ -63,7 +63,7 @@ import {
 } from '../hooks/features/listView/useGridListView';
 
 export const useDataGridComponent = (
-  inputApiRef: React.MutableRefObject<GridApiCommunity> | undefined,
+  inputApiRef: React.RefObject<GridApiCommunity> | undefined,
   props: DataGridProcessedProps,
 ) => {
   const apiRef = useGridInitialization<GridPrivateApiCommunity, GridApiCommunity>(
diff --git a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
index d6df6072a0504..4125db721da6f 100644
--- a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
+++ b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
@@ -7,14 +7,14 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 interface GridActionsCellItemCommonProps {
   label: string;
-  icon?: React.ReactElement;
+  icon?: React.ReactElement<any>;
   /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
   component?: React.ElementType;
 }
 
 export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
   (
-    | ({ showInMenu?: false; icon: React.ReactElement } & Omit<IconButtonProps, 'component'>)
+    | ({ showInMenu?: false; icon: React.ReactElement<any> } & Omit<IconButtonProps, 'component'>)
     | ({
         showInMenu: true;
         /**
@@ -44,7 +44,7 @@ const GridActionsCellItem = forwardRef<HTMLElement, GridActionsCellItemProps>((p
         {...other}
         onClick={handleClick}
         {...rootProps.slotProps?.baseIconButton}
-        ref={ref as React.MutableRefObject<HTMLButtonElement>}
+        ref={ref as React.RefObject<HTMLButtonElement>}
       >
         {React.cloneElement(icon!, { fontSize: 'small' })}
       </rootProps.slots.baseIconButton>
diff --git a/packages/x-data-grid/src/components/cell/GridEditDateCell.tsx b/packages/x-data-grid/src/components/cell/GridEditDateCell.tsx
index 0927583c5aab7..17baf45933207 100644
--- a/packages/x-data-grid/src/components/cell/GridEditDateCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridEditDateCell.tsx
@@ -66,7 +66,7 @@ function GridEditDateCell(props: GridEditDateCellProps) {
 
   const isDateTime = colDef.type === 'dateTime';
   const apiRef = useGridApiContext();
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const valueTransformed = React.useMemo(() => {
     let parsedDate: Date | null;
diff --git a/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx
index e1243ecb269d2..73416184fade9 100644
--- a/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx
@@ -78,7 +78,7 @@ const GridEditInputCell = forwardRef<HTMLInputElement, GridEditInputCellProps>((
   } = props;
 
   const apiRef = useGridApiContext();
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const [valueState, setValueState] = React.useState(value);
   const classes = useUtilityClasses(rootProps);
 
diff --git a/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
index baab9cfbdcd14..90e8b042441ba 100644
--- a/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
@@ -58,8 +58,8 @@ function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps) {
   } = props;
 
   const apiRef = useGridApiContext();
-  const ref = React.useRef<any>();
-  const inputRef = React.useRef<any>();
+  const ref = React.useRef<any>(null);
+  const inputRef = React.useRef<any>(null);
   const [open, setOpen] = React.useState(initialOpen);
 
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
diff --git a/packages/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx
index 82f61061a22e8..81bb9fc0a929b 100644
--- a/packages/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx
@@ -11,7 +11,7 @@ export interface ColumnHeaderMenuIconProps {
   columnMenuId: string;
   columnMenuButtonId: string;
   open: boolean;
-  iconButtonRef: React.RefObject<HTMLButtonElement>;
+  iconButtonRef: React.RefObject<HTMLButtonElement | null>;
 }
 
 type OwnerState = ColumnHeaderMenuIconProps & {
diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx
index 92641c45e46e8..770a0d754d9d7 100644
--- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx
@@ -89,7 +89,7 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro
       title={
         apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(
           counter,
-        ) as React.ReactElement
+        ) as React.ReactElement<any>
       }
       enterDelay={1000}
       {...rootProps.slotProps?.baseTooltip}
diff --git a/packages/x-data-grid/src/components/panel/GridPanel.test.tsx b/packages/x-data-grid/src/components/panel/GridPanel.test.tsx
index 4e82d0de7ddd9..51c38dc7e87e4 100644
--- a/packages/x-data-grid/src/components/panel/GridPanel.test.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanel.test.tsx
@@ -33,7 +33,7 @@ describe('<GridPanel />', () => {
     classes: classes as any,
     inheritComponent: Popper,
     muiName: 'MuiGridPanel',
-    render: (node: React.ReactElement) =>
+    render: (node: React.ReactElement<any>) =>
       render(
         <Wrapper>
           <div data-id="gridPanelAnchor" />
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
index 83d7eb1b49419..4a317525c5540 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
@@ -55,7 +55,7 @@ const GridToolbarDensitySelector = forwardRef<HTMLButtonElement, GridToolbarDens
       },
     ];
 
-    const startIcon = React.useMemo<React.ReactElement>(() => {
+    const startIcon = React.useMemo<React.ReactElement<any>>(() => {
       switch (density) {
         case 'compact':
           return <rootProps.slots.densityCompactIcon />;
@@ -92,7 +92,7 @@ const GridToolbarDensitySelector = forwardRef<HTMLButtonElement, GridToolbarDens
       return null;
     }
 
-    const densityElements = densityOptions.map<React.ReactElement>((option, index) => (
+    const densityElements = densityOptions.map<React.ReactElement<any>>((option, index) => (
       <rootProps.slots.baseMenuItem
         key={index}
         onClick={() => handleDensityUpdate(option.value)}
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
index 46ba3a47cc4f1..ba30f5ae4f4dc 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
@@ -73,10 +73,10 @@ const GridToolbarFilterButton = forwardRef<HTMLButtonElement, GridToolbarFilterB
 
     const tooltipContentNode = React.useMemo(() => {
       if (preferencePanel.open) {
-        return apiRef.current.getLocaleText('toolbarFiltersTooltipHide') as React.ReactElement;
+        return apiRef.current.getLocaleText('toolbarFiltersTooltipHide') as React.ReactElement<any>;
       }
       if (activeFilters.length === 0) {
-        return apiRef.current.getLocaleText('toolbarFiltersTooltipShow') as React.ReactElement;
+        return apiRef.current.getLocaleText('toolbarFiltersTooltipShow') as React.ReactElement<any>;
       }
 
       const getOperatorLabel = (item: GridFilterItem): string =>
diff --git a/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts
index d47a8bbe98b09..78300aa77e2a1 100644
--- a/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts
+++ b/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts
@@ -38,7 +38,10 @@ export interface GridPipeProcessingLookup {
   hydrateRows: {
     value: GridHydrateRowsValue;
   };
-  exportMenu: { value: { component: React.ReactElement; componentName: string }[]; context: any };
+  exportMenu: {
+    value: { component: React.ReactElement<any>; componentName: string }[];
+    context: any;
+  };
   preferencePanel: { value: React.ReactNode; context: GridPreferencePanelsValue };
   restoreState: {
     value: GridRestoreStatePreProcessingValue;
diff --git a/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts
index 5b8f5e4c40464..2a015ab85cdde 100644
--- a/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts
+++ b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts
@@ -49,7 +49,7 @@ type GroupCache = {
  *   * a processor is registered.
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
-export const useGridPipeProcessing = (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => {
+export const useGridPipeProcessing = (apiRef: React.RefObject<GridPrivateApiCommon>) => {
   const cache = React.useRef<Cache>({});
 
   const isRunning = React.useRef(false);
diff --git a/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts
index f90a2045f2b77..540487e2889fc 100644
--- a/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts
+++ b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts
@@ -7,11 +7,11 @@ export const useGridRegisterPipeApplier = <
   PrivateApi extends GridPrivateApiCommon,
   G extends GridPipeProcessorGroup,
 >(
-  apiRef: React.MutableRefObject<PrivateApi>,
+  apiRef: React.RefObject<PrivateApi>,
   group: G,
   callback: () => void,
 ) => {
-  const cleanup = React.useRef<(() => void) | null>();
+  const cleanup = React.useRef<(() => void) | null>(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
 
   const registerPreProcessor = React.useCallback(() => {
diff --git a/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts
index 6082a61bdffa7..fe82da7b78487 100644
--- a/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts
+++ b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts
@@ -7,11 +7,11 @@ export const useGridRegisterPipeProcessor = <
   PrivateApi extends GridPrivateApiCommon,
   G extends GridPipeProcessorGroup,
 >(
-  apiRef: React.MutableRefObject<PrivateApi>,
+  apiRef: React.RefObject<PrivateApi>,
   group: G,
   callback: GridPipeProcessor<G>,
 ) => {
-  const cleanup = React.useRef<(() => void) | null>();
+  const cleanup = React.useRef<(() => void) | null>(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
 
   const registerPreProcessor = React.useCallback(() => {
diff --git a/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts b/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts
index d90fdd630916a..6eb888a914f8a 100644
--- a/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts
+++ b/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts
@@ -7,7 +7,7 @@ export const useGridRegisterStrategyProcessor = <
   Api extends GridPrivateApiCommon,
   G extends GridStrategyProcessorName,
 >(
-  apiRef: React.MutableRefObject<Api>,
+  apiRef: React.RefObject<Api>,
   strategyName: string,
   group: G,
   processor: GridStrategyProcessor<G>,
diff --git a/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts b/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts
index 1fc83517a1fcb..f851232b2f45c 100644
--- a/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts
+++ b/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts
@@ -62,7 +62,7 @@ type UntypedStrategyProcessors = {
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
  * There are two active groups named `rowTree` and `dataSource`.
  */
-export const useGridStrategyProcessing = (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => {
+export const useGridStrategyProcessing = (apiRef: React.RefObject<GridPrivateApiCommon>) => {
   const availableStrategies = React.useRef(
     new Map<string, { group: GridStrategyGroupValue; isAvailable: () => boolean }>(),
   );
diff --git a/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts
index 3113bc9970105..75659f4926a62 100644
--- a/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts
+++ b/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts
@@ -23,7 +23,7 @@ export function unwrapPrivateAPI<
 let globalId = 0;
 
 function createPrivateAPI<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(
-  publicApiRef: React.MutableRefObject<Api>,
+  publicApiRef: React.RefObject<Api>,
 ): PrivateApi {
   const existingPrivateApi = (publicApiRef.current as any)?.[SYMBOL_API_PRIVATE];
   if (existingPrivateApi) {
@@ -96,14 +96,14 @@ export function useGridApiInitialization<
   PrivateApi extends GridPrivateApiCommon,
   Api extends GridApiCommon,
 >(
-  inputApiRef: React.MutableRefObject<Api> | undefined,
+  inputApiRef: React.RefObject<Api> | undefined,
   props: Pick<DataGridProcessedProps, 'signature'>,
-): React.MutableRefObject<PrivateApi> {
-  const publicApiRef = React.useRef() as React.MutableRefObject<Api>;
-  const privateApiRef = React.useRef() as React.MutableRefObject<PrivateApi>;
+): React.RefObject<PrivateApi> {
+  const publicApiRef = React.useRef<Api>(null) as React.RefObject<Api>;
+  const privateApiRef = React.useRef<PrivateApi>(null) as React.RefObject<PrivateApi>;
 
   if (!privateApiRef.current) {
-    privateApiRef.current = createPrivateAPI(publicApiRef) as PrivateApi;
+    privateApiRef.current = createPrivateAPI(publicApiRef);
   }
 
   if (!publicApiRef.current) {
diff --git a/packages/x-data-grid/src/hooks/core/useGridInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridInitialization.ts
index d59852b43a54a..5b2e857ff6485 100644
--- a/packages/x-data-grid/src/hooks/core/useGridInitialization.ts
+++ b/packages/x-data-grid/src/hooks/core/useGridInitialization.ts
@@ -17,7 +17,7 @@ export const useGridInitialization = <
   PrivateApi extends GridPrivateApiCommon,
   Api extends GridApiCommon,
 >(
-  inputApiRef: React.MutableRefObject<Api> | undefined,
+  inputApiRef: React.RefObject<Api> | undefined,
   props: DataGridProcessedProps,
 ) => {
   const privateApiRef = useGridApiInitialization<PrivateApi, Api>(inputApiRef, props);
diff --git a/packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx b/packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx
index 576952df12ca4..cc5f32c1dc317 100644
--- a/packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx
+++ b/packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 
-export const useGridIsRtl = (apiRef: React.MutableRefObject<GridPrivateApiCommon>): void => {
+export const useGridIsRtl = (apiRef: React.RefObject<GridPrivateApiCommon>): void => {
   const isRtl = useRtl();
 
   if (apiRef.current.state.isRtl === undefined) {
diff --git a/packages/x-data-grid/src/hooks/core/useGridLocaleText.tsx b/packages/x-data-grid/src/hooks/core/useGridLocaleText.tsx
index 7a1605e0c665c..26809f6f6047f 100644
--- a/packages/x-data-grid/src/hooks/core/useGridLocaleText.tsx
+++ b/packages/x-data-grid/src/hooks/core/useGridLocaleText.tsx
@@ -4,7 +4,7 @@ import { GridLocaleTextApi } from '../../models/api/gridLocaleTextApi';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 
 export const useGridLocaleText = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommon>,
+  apiRef: React.RefObject<GridPrivateApiCommon>,
   props: Pick<DataGridProcessedProps, 'localeText'>,
 ): void => {
   const getLocaleText = React.useCallback<GridLocaleTextApi['getLocaleText']>(
diff --git a/packages/x-data-grid/src/hooks/core/useGridLoggerFactory.ts b/packages/x-data-grid/src/hooks/core/useGridLoggerFactory.ts
index b5586e6acfcbd..d403482e4498b 100644
--- a/packages/x-data-grid/src/hooks/core/useGridLoggerFactory.ts
+++ b/packages/x-data-grid/src/hooks/core/useGridLoggerFactory.ts
@@ -43,7 +43,7 @@ function getAppender(name: string, logLevel: string, appender: Logger = console)
 }
 
 export const useGridLoggerFactory = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommon>,
+  apiRef: React.RefObject<GridPrivateApiCommon>,
   props: Pick<DataGridProcessedProps, 'logger' | 'logLevel'>,
 ) => {
   const getLogger = React.useCallback<GridLoggerApi['getLogger']>(
diff --git a/packages/x-data-grid/src/hooks/core/useGridRefs.ts b/packages/x-data-grid/src/hooks/core/useGridRefs.ts
index 98e266fda316d..11e71729b0ee0 100644
--- a/packages/x-data-grid/src/hooks/core/useGridRefs.ts
+++ b/packages/x-data-grid/src/hooks/core/useGridRefs.ts
@@ -2,10 +2,10 @@ import * as React from 'react';
 import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 
 export const useGridRefs = <PrivateApi extends GridPrivateApiCommon>(
-  apiRef: React.MutableRefObject<PrivateApi>,
+  apiRef: React.RefObject<PrivateApi>,
 ) => {
   const rootElementRef = React.useRef<HTMLDivElement>(null);
-  const mainElementRef = React.useRef<HTMLDivElement | null>(null);
+  const mainElementRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollerRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollbarVerticalRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollbarHorizontalRef = React.useRef<HTMLDivElement>(null);
diff --git a/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts
index 05cf991de26bb..220f03de8a841 100644
--- a/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts
+++ b/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts
@@ -6,7 +6,7 @@ import { useGridApiMethod } from '../utils';
 import { isFunction } from '../../utils/utils';
 
 export const useGridStateInitialization = <PrivateApi extends GridPrivateApiCommon>(
-  apiRef: React.MutableRefObject<PrivateApi>,
+  apiRef: React.RefObject<PrivateApi>,
 ) => {
   const controlStateMapRef = React.useRef<
     Record<string, GridControlStateItem<PrivateApi['state'], any, any>>
diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
index 2f33a2bdd0bfe..8874cdc6f84f4 100644
--- a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
+++ b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -132,8 +132,8 @@ function preventClick(event: MouseEvent) {
  * Checker that returns a promise that resolves when the column virtualization
  * is disabled.
  */
-function useColumnVirtualizationDisabled(apiRef: React.MutableRefObject<GridPrivateApiCommunity>) {
-  const promise = React.useRef<ControllablePromise>();
+function useColumnVirtualizationDisabled(apiRef: React.RefObject<GridPrivateApiCommunity>) {
+  const promise = React.useRef<ControllablePromise>(undefined);
   const selector = () => gridVirtualizationColumnEnabledSelector(apiRef);
   const value = useGridSelector(apiRef, selector);
 
@@ -184,7 +184,7 @@ function excludeOutliers(inputValues: number[], factor: number) {
 }
 
 function extractColumnWidths(
-  apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
+  apiRef: React.RefObject<GridPrivateApiCommunity>,
   options: AutosizeOptionsRequired,
   columns: GridStateColDef[],
 ) {
@@ -270,7 +270,7 @@ function createResizeRefs() {
  * TODO: improve experience for last column
  */
 export const useGridColumnResize = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
+  apiRef: React.RefObject<GridPrivateApiCommunity>,
   props: Pick<
     DataGridProcessedProps,
     | 'autosizeOptions'
@@ -289,11 +289,11 @@ export const useGridColumnResize = (
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
-  const initialOffsetToSeparator = React.useRef<number>();
-  const resizeDirection = React.useRef<ResizeDirection>();
+  const initialOffsetToSeparator = React.useRef<number>(null);
+  const resizeDirection = React.useRef<ResizeDirection>(null);
 
   const stopResizeEventTimeout = useTimeout();
-  const touchId = React.useRef<number>();
+  const touchId = React.useRef<number>(undefined);
 
   const updateWidth = (newWidth: number) => {
     logger.debug(`Updating width to ${newWidth} for col ${refs.colDef!.field}`);
diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
index 600c55d8d7f76..726343813ed30 100644
--- a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
+++ b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
@@ -65,7 +65,7 @@ export const useGridRowEditing = (
   const [rowModesModel, setRowModesModel] = React.useState<GridRowModesModel>({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef<GridRowModesModel>({});
-  const focusTimeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const focusTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const nextFocusedCell = React.useRef<GridCellParams | null>(null);
 
   const {
diff --git a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
index e895aaf614065..bc07bd7bc5592 100644
--- a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
+++ b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
@@ -70,7 +70,7 @@ export const useGridPrintExport = (
   const previousGridState = React.useRef<GridInitialStateCommunity | null>(null);
   const previousColumnVisibility = React.useRef<{ [key: string]: boolean }>({});
   const previousRows = React.useRef<GridValidRowModel[]>([]);
-  const previousVirtualizationState = React.useRef<GridStateCommunity['virtualization']>();
+  const previousVirtualizationState = React.useRef<GridStateCommunity['virtualization']>(null);
 
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef!.current!);
diff --git a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
index 8622525c32dd8..45cb7e7df94c1 100644
--- a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
+++ b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
@@ -48,7 +48,7 @@ import { gridListColumnSelector } from '../listView/gridListViewSelectors';
  * @requires useGridColumnSpanning (method) - can be after
  */
 export const useGridKeyboardNavigation = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
+  apiRef: React.RefObject<GridPrivateApiCommunity>,
   props: Pick<
     DataGridProcessedProps,
     | 'pagination'
diff --git a/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts b/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts
index ef0b9ad65321f..8461272804d26 100644
--- a/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts
+++ b/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts
@@ -24,8 +24,8 @@ export const useGridPreferencesPanel = (
 ): void => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
 
-  const hideTimeout = React.useRef<ReturnType<typeof setTimeout>>();
-  const immediateTimeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const hideTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  const immediateTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   /**
    * API METHODS
diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelectionPreProcessors.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelectionPreProcessors.ts
index 3732826456486..aceac61373078 100644
--- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelectionPreProcessors.ts
+++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelectionPreProcessors.ts
@@ -23,7 +23,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
 };
 
 export const useGridRowSelectionPreProcessors = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
+  apiRef: React.RefObject<GridPrivateApiCommunity>,
   props: DataGridProcessedProps,
 ) => {
   const ownerState = { classes: props.classes };
diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts
index b70494fd17c01..2953e81904d8a 100644
--- a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts
+++ b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts
@@ -43,7 +43,7 @@ const skippedFields = new Set([
 const DEFAULT_ROWS_TO_PROCESS = 20;
 
 const computeRowSpanningState = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
+  apiRef: React.RefObject<GridPrivateApiCommunity>,
   colDefs: GridColDef[],
   visibleRows: GridRowEntry<GridValidRowModel>[],
   range: RowRange,
diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRowsPreProcessors.tsx b/packages/x-data-grid/src/hooks/features/rows/useGridRowsPreProcessors.tsx
index f587417bd36b6..56bc28c17dbec 100644
--- a/packages/x-data-grid/src/hooks/features/rows/useGridRowsPreProcessors.tsx
+++ b/packages/x-data-grid/src/hooks/features/rows/useGridRowsPreProcessors.tsx
@@ -93,9 +93,7 @@ const flatRowTreeCreationMethod: GridStrategyProcessor<'rowTreeCreation'> = (par
   return updateFlatRowTree({ previousTree: params.previousTree!, actions: params.updates.actions });
 };
 
-export const useGridRowsPreProcessors = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
-) => {
+export const useGridRowsPreProcessors = (apiRef: React.RefObject<GridPrivateApiCommunity>) => {
   useGridRegisterStrategyProcessor(
     apiRef,
     GRID_DEFAULT_STRATEGY,
diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index 948450691a821..0b1b5919c8430 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -99,7 +99,7 @@ try {
 }
 
 export const useGridVirtualScroller = () => {
-  const apiRef = useGridPrivateApiContext() as React.MutableRefObject<PrivateApiWithInfiniteLoader>;
+  const apiRef = useGridPrivateApiContext() as React.RefObject<PrivateApiWithInfiniteLoader>;
   const rootProps = useGridRootProps();
   const { unstable_listView: listView } = rootProps;
   const visibleColumns = useGridSelector(apiRef, () =>
@@ -136,6 +136,8 @@ export const useGridVirtualScroller = () => {
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
 
+  const previousSize = React.useRef<{ width: number; height: number }>(null);
+
   const mainRefCallback = React.useCallback(
     (node: HTMLDivElement | null) => {
       mainRef.current = node;
@@ -145,10 +147,16 @@ export const useGridVirtualScroller = () => {
       }
 
       const initialRect = node.getBoundingClientRect();
-
       let lastSize = roundDimensions(initialRect);
 
-      apiRef.current.publishEvent('resize', lastSize);
+      if (
+        !previousSize.current ||
+        (lastSize.width !== previousSize.current.width &&
+          lastSize.height !== previousSize.current.height)
+      ) {
+        previousSize.current = lastSize;
+        apiRef.current.publishEvent('resize', lastSize);
+      }
 
       if (typeof ResizeObserver === 'undefined') {
         return undefined;
diff --git a/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts b/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts
index 76cf3808c28ef..26ad34bf45d0f 100644
--- a/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts
+++ b/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts
@@ -43,7 +43,7 @@ export function createUseGridApiEventHandler(registryContainer: RegistryContaine
 
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef<(() => void) | null>(null);
-    const handlerRef = React.useRef<GridEventListener<E> | undefined>();
+    const handlerRef = React.useRef<GridEventListener<E> | undefined>(null);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef<UnregisterToken | null>(null);
 
diff --git a/packages/x-data-grid/src/hooks/utils/useGridApiMethod.ts b/packages/x-data-grid/src/hooks/utils/useGridApiMethod.ts
index bbaaa2b3eb6cd..7b1131b82a6c6 100644
--- a/packages/x-data-grid/src/hooks/utils/useGridApiMethod.ts
+++ b/packages/x-data-grid/src/hooks/utils/useGridApiMethod.ts
@@ -12,7 +12,7 @@ export function useGridApiMethod<
   PrivateOnlyApi extends Omit<PrivateApi, keyof PublicApi>,
   V extends 'public' | 'private',
   T extends V extends 'public' ? Partial<PublicApi> : Partial<PrivateOnlyApi>,
->(privateApiRef: React.MutableRefObject<PrivateApi>, apiMethods: T, visibility: V) {
+>(privateApiRef: React.RefObject<PrivateApi>, apiMethods: T, visibility: V) {
   const isFirstRender = React.useRef(true);
 
   useEnhancedEffect(() => {
diff --git a/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts b/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts
index ae5db730f0975..03fafb33fb2a3 100644
--- a/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts
+++ b/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts
@@ -6,4 +6,4 @@ import { GridApiCommunity } from '../../models/api/gridApiCommunity';
  * Hook that instantiate a [[GridApiRef]].
  */
 export const useGridApiRef = <Api extends GridApiCommon = GridApiCommunity>() =>
-  React.useRef({}) as React.MutableRefObject<Api>;
+  React.useRef({}) as React.RefObject<Api>;
diff --git a/packages/x-data-grid/src/hooks/utils/useGridInitializeState.ts b/packages/x-data-grid/src/hooks/utils/useGridInitializeState.ts
index 7f3a59d6e5d7a..0b48e54195616 100644
--- a/packages/x-data-grid/src/hooks/utils/useGridInitializeState.ts
+++ b/packages/x-data-grid/src/hooks/utils/useGridInitializeState.ts
@@ -13,7 +13,7 @@ export type GridStateInitializer<
 > = (
   state: DeepPartial<PrivateApi['state']>,
   props: P,
-  privateApiRef: React.MutableRefObject<PrivateApi>,
+  privateApiRef: React.RefObject<PrivateApi>,
 ) => DeepPartial<PrivateApi['state']>;
 
 export const useGridInitializeState = <
@@ -21,7 +21,7 @@ export const useGridInitializeState = <
   PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity,
 >(
   initializer: GridStateInitializer<P, PrivateApi>,
-  privateApiRef: React.MutableRefObject<PrivateApi>,
+  privateApiRef: React.RefObject<PrivateApi>,
   props: P,
 ) => {
   const isInitialized = React.useRef(false);
diff --git a/packages/x-data-grid/src/hooks/utils/useGridLogger.ts b/packages/x-data-grid/src/hooks/utils/useGridLogger.ts
index c672a622996d1..d8671461f7466 100644
--- a/packages/x-data-grid/src/hooks/utils/useGridLogger.ts
+++ b/packages/x-data-grid/src/hooks/utils/useGridLogger.ts
@@ -3,7 +3,7 @@ import { Logger } from '../../models/logger';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 
 export function useGridLogger<PrivateApi extends GridPrivateApiCommon>(
-  privateApiRef: React.MutableRefObject<PrivateApi>,
+  privateApiRef: React.RefObject<PrivateApi>,
   name: string,
 ): Logger {
   const logger = React.useRef<Logger | null>(null);
diff --git a/packages/x-data-grid/src/hooks/utils/useGridVisibleRows.ts b/packages/x-data-grid/src/hooks/utils/useGridVisibleRows.ts
index 7b32dcfb0c988..b291c89dbdc53 100644
--- a/packages/x-data-grid/src/hooks/utils/useGridVisibleRows.ts
+++ b/packages/x-data-grid/src/hooks/utils/useGridVisibleRows.ts
@@ -8,7 +8,7 @@ import { gridExpandedSortedRowEntriesSelector } from '../features/filter/gridFil
 import type { GridApiCommon, GridRowEntry } from '../../models';
 
 export const getVisibleRows = <Api extends GridApiCommon>(
-  apiRef: React.MutableRefObject<Api>,
+  apiRef: React.RefObject<Api>,
   props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>,
 ) => {
   let rows: GridRowEntry[];
@@ -37,7 +37,7 @@ export const getVisibleRows = <Api extends GridApiCommon>(
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
 export const useGridVisibleRows = <Api extends GridApiCommon>(
-  apiRef: React.MutableRefObject<Api>,
+  apiRef: React.RefObject<Api>,
   props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>,
 ) => {
   const response = getVisibleRows(apiRef, props);
diff --git a/packages/x-data-grid/src/models/api/gridCoreApi.ts b/packages/x-data-grid/src/models/api/gridCoreApi.ts
index c5d7be49b1fd3..ce309191f7ab8 100644
--- a/packages/x-data-grid/src/models/api/gridCoreApi.ts
+++ b/packages/x-data-grid/src/models/api/gridCoreApi.ts
@@ -14,7 +14,7 @@ export interface GridCoreApi {
    * The React ref of the grid root container div element.
    * @ignore - do not document.
    */
-  rootElementRef: React.RefObject<HTMLDivElement>;
+  rootElementRef: React.RefObject<HTMLDivElement | null>;
   /**
    * Registers a handler for an event.
    * @param {string} event The name of the event.
@@ -67,27 +67,27 @@ export interface GridCorePrivateApi<
   /**
    * The React ref of the grid main container div element.
    */
-  mainElementRef: React.MutableRefObject<HTMLDivElement | null>;
+  mainElementRef: React.RefObject<HTMLDivElement | null>;
   /**
    * The React ref of the grid's virtual scroller container element.
    */
-  virtualScrollerRef: React.RefObject<HTMLDivElement>;
+  virtualScrollerRef: React.RefObject<HTMLDivElement | null>;
   /**
    * The React ref of the grid's vertical virtual scrollbar container element.
    */
-  virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement>;
+  virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement | null>;
   /**
    * The React ref of the grid's horizontal virtual scrollbar container element.
    */
-  virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement>;
+  virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement | null>;
   /**
    * The React ref of the grid column container virtualized div element.
    */
-  columnHeadersContainerRef: React.RefObject<HTMLDivElement>;
+  columnHeadersContainerRef: React.RefObject<HTMLDivElement | null>;
   /**
    * The React ref of the grid header filter row element.
    */
-  headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
+  headerFiltersElementRef?: React.RefObject<HTMLDivElement | null>;
   register: <
     V extends 'public' | 'private',
     T extends V extends 'public'
diff --git a/packages/x-data-grid/src/models/api/gridDensityApi.ts b/packages/x-data-grid/src/models/api/gridDensityApi.ts
index 8614bda501a81..2445925f25249 100644
--- a/packages/x-data-grid/src/models/api/gridDensityApi.ts
+++ b/packages/x-data-grid/src/models/api/gridDensityApi.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GridDensity } from '../gridDensity';
 
 export interface GridDensityOption {
-  icon: React.ReactElement;
+  icon: React.ReactElement<any>;
   label: string;
   value: GridDensity;
 }
diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts
index 3e7281d725574..f12c6a602476f 100644
--- a/packages/x-data-grid/src/models/props/DataGridProps.ts
+++ b/packages/x-data-grid/src/models/props/DataGridProps.ts
@@ -398,7 +398,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
   /**
    * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
-  apiRef?: React.MutableRefObject<GridApiCommunity>;
+  apiRef?: React.RefObject<GridApiCommunity>;
   /**
    * Signal to the underlying logic what version of the public component API
    * of the Data Grid is exposed [[GridSignature]].
diff --git a/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx
index 0adf925558ef2..581c6534bc437 100644
--- a/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import {
   DataGrid,
   DataGridProps,
@@ -18,7 +18,7 @@ const rows: GridRowsProp = [{ id: 1, idBis: 1 }];
 
 const columns: GridColDef[] = [{ field: 'id' }, { field: 'idBis' }];
 
-describe('<DataGridPro /> - Columns visibility', () => {
+describe('<DataGrid /> - Columns visibility', () => {
   const { render } = createRenderer();
 
   function TestDataGrid(
@@ -50,8 +50,8 @@ describe('<DataGridPro /> - Columns visibility', () => {
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']);
     });
 
-    it('should update the visible columns when props.onColumnVisibilityModelChange and props.columnVisibilityModel are not defined', () => {
-      render(
+    it('should update the visible columns when props.onColumnVisibilityModelChange and props.columnVisibilityModel are not defined', async () => {
+      const { user } = render(
         <TestDataGrid
           slots={{
             toolbar: GridToolbar,
@@ -60,14 +60,14 @@ describe('<DataGridPro /> - Columns visibility', () => {
       );
 
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']);
-      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
-      fireEvent.click(screen.getByRole('checkbox', { name: 'id' }));
+      await user.click(screen.getByRole('button', { name: 'Select columns' }));
+      await user.click(screen.getByRole('checkbox', { name: 'id' }));
       expect(getColumnHeadersTextContent()).to.deep.equal(['idBis']);
     });
 
-    it('should call onColumnVisibilityModelChange and update the visible columns when props.columnVisibilityModel is not defined', () => {
+    it('should call onColumnVisibilityModelChange and update the visible columns when props.columnVisibilityModel is not defined', async () => {
       const onColumnVisibilityModelChange = spy();
-      render(
+      const { user } = render(
         <TestDataGrid
           slots={{
             toolbar: GridToolbar,
@@ -77,8 +77,8 @@ describe('<DataGridPro /> - Columns visibility', () => {
       );
 
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']);
-      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
-      fireEvent.click(screen.getByRole('checkbox', { name: 'id' }));
+      await user.click(screen.getByRole('button', { name: 'Select columns' }));
+      await user.click(screen.getByRole('checkbox', { name: 'id' }));
       expect(getColumnHeadersTextContent()).to.deep.equal(['idBis']);
       expect(onColumnVisibilityModelChange.callCount).to.equal(1);
       expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({
@@ -109,7 +109,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
       });
     });
 
-    it('should call onColumnVisibilityModelChange with the new model when toggling all columns', () => {
+    it('should call onColumnVisibilityModelChange with the new model when toggling all columns', async () => {
       const onColumnVisibilityModelChange = spy();
       function ControlledTest() {
         const [model, setModel] = React.useState<GridColumnVisibilityModel>({ idBis: false });
@@ -126,20 +126,20 @@ describe('<DataGridPro /> - Columns visibility', () => {
           />
         );
       }
-      render(<ControlledTest />);
+      const { user } = render(<ControlledTest />);
 
       expect(getColumnHeadersTextContent()).to.deep.equal(['id']);
 
-      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+      await user.click(screen.getByRole('button', { name: 'Select columns' }));
       const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
 
       // Hide all
-      fireEvent.click(showHideAllCheckbox);
+      await user.click(showHideAllCheckbox);
       expect(onColumnVisibilityModelChange.callCount).to.equal(1);
       expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({});
 
       // Show all
-      fireEvent.click(showHideAllCheckbox);
+      await user.click(showHideAllCheckbox);
       expect(onColumnVisibilityModelChange.callCount).to.equal(2);
       expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({
         id: false,
@@ -148,8 +148,8 @@ describe('<DataGridPro /> - Columns visibility', () => {
     });
 
     // Fixes (1) and (2) in https://github.com/mui/mui-x/issues/7393#issuecomment-1372129661
-    it('should not show hidden non hideable columns when "Show/Hide All" is clicked', () => {
-      render(
+    it('should not show hidden non hideable columns when "Show/Hide All" is clicked', async () => {
+      const { user } = render(
         <TestDataGrid
           slots={{
             toolbar: GridToolbar,
@@ -163,13 +163,13 @@ describe('<DataGridPro /> - Columns visibility', () => {
         />,
       );
 
-      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+      await user.click(screen.getByRole('button', { name: 'Select columns' }));
       const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
       // Hide all
-      fireEvent.click(showHideAllCheckbox);
+      await user.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal([]);
       // Show all
-      fireEvent.click(showHideAllCheckbox);
+      await user.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal(['id']);
     });
   });
@@ -226,8 +226,8 @@ describe('<DataGridPro /> - Columns visibility', () => {
       expect(getColumnHeadersTextContent()).to.deep.equal(['id']);
     });
 
-    it('should allow to update the visible columns through the UI when initialized with initialState', () => {
-      render(
+    it('should allow to update the visible columns through the UI when initialized with initialState', async () => {
+      const { user } = render(
         <TestDataGrid
           initialState={{
             columns: {
@@ -241,14 +241,14 @@ describe('<DataGridPro /> - Columns visibility', () => {
       );
 
       expect(getColumnHeadersTextContent()).to.deep.equal(['id']);
-      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
-      fireEvent.click(screen.getByRole('checkbox', { name: 'id' }));
+      await user.click(screen.getByRole('button', { name: 'Select columns' }));
+      await user.click(screen.getByRole('checkbox', { name: 'id' }));
       expect(getColumnHeadersTextContent()).to.deep.equal([]);
     });
   });
 
-  it('should autofocus the first switch element in columns management when `autoFocusSearchField` disabled', () => {
-    render(
+  it('should autofocus the first switch element in columns management when `autoFocusSearchField` disabled', async () => {
+    const { user } = render(
       <TestDataGrid
         slots={{
           toolbar: GridToolbar,
@@ -261,13 +261,13 @@ describe('<DataGridPro /> - Columns visibility', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+    await user.click(screen.getByRole('button', { name: 'Select columns' }));
 
     expect(screen.getByRole('checkbox', { name: columns[0].field })).toHaveFocus();
   });
 
-  it('should hide `Show/Hide all` in columns management when `disableShowHideToggle` is `true`', () => {
-    const { setProps } = render(
+  it('should hide `Show/Hide all` in columns management when `disableShowHideToggle` is `true`', async () => {
+    const { setProps, user } = render(
       <TestDataGrid
         slots={{
           toolbar: GridToolbar,
@@ -275,7 +275,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+    await user.click(screen.getByRole('button', { name: 'Select columns' }));
     // check if `Show/Hide all` checkbox is present initially
     expect(screen.getByRole('checkbox', { name: 'Show/Hide All' })).not.to.equal(null);
     setProps({
@@ -290,8 +290,8 @@ describe('<DataGridPro /> - Columns visibility', () => {
     expect(screen.queryByRole('checkbox', { name: 'Show/Hide All' })).to.equal(null);
   });
 
-  it('should hide `Reset` in columns panel when `disableResetButton` is `true`', () => {
-    const { setProps } = render(
+  it('should hide `Reset` in columns panel when `disableResetButton` is `true`', async () => {
+    const { setProps, user } = render(
       <TestDataGrid
         slots={{
           toolbar: GridToolbar,
@@ -299,7 +299,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+    await user.click(screen.getByRole('button', { name: 'Select columns' }));
     // check if Reset button is present initially
     expect(screen.getByRole('button', { name: 'Reset' })).not.to.equal(null);
     setProps({
@@ -313,8 +313,8 @@ describe('<DataGridPro /> - Columns visibility', () => {
     expect(screen.queryByRole('button', { name: 'Reset' })).to.equal(null);
   });
 
-  it('should reset the columns to initial columns state when `Reset` button is clicked in columns management panel', () => {
-    render(
+  it('should reset the columns to initial columns state when `Reset` button is clicked in columns management panel', async () => {
+    const { user } = render(
       <TestDataGrid
         slots={{
           toolbar: GridToolbar,
@@ -323,17 +323,17 @@ describe('<DataGridPro /> - Columns visibility', () => {
     );
 
     expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']);
-    fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+    await user.click(screen.getByRole('button', { name: 'Select columns' }));
     const resetButton = screen.getByRole('button', { name: 'Reset' });
     expect(resetButton).to.have.attribute('disabled');
 
     // Hide `idBis` column
-    fireEvent.click(screen.getByRole('checkbox', { name: 'idBis' }));
+    await user.click(screen.getByRole('checkbox', { name: 'idBis' }));
     expect(getColumnHeadersTextContent()).to.deep.equal(['id']);
     expect(resetButton).not.to.have.attribute('disabled');
 
     // Reset columns
-    fireEvent.click(resetButton);
+    await user.click(resetButton);
     expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']);
     expect(resetButton).to.have.attribute('disabled');
   });
@@ -360,10 +360,10 @@ describe('<DataGridPro /> - Columns visibility', () => {
       expect(screen.queryByRole('checkbox', { name: 'idBis' })).to.equal(null);
     });
 
-    it('should avoid toggling columns provided by `getTogglableColumns` prop on `Show/Hide All`', () => {
+    it('should avoid toggling columns provided by `getTogglableColumns` prop on `Show/Hide All`', async () => {
       const getTogglableColumns = (cols: GridColDef[]) =>
         cols.filter((column) => column.field !== 'idBis').map((column) => column.field);
-      render(
+      const { user } = render(
         <TestDataGrid
           slots={{
             toolbar: GridToolbar,
@@ -376,19 +376,19 @@ describe('<DataGridPro /> - Columns visibility', () => {
         />,
       );
 
-      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+      await user.click(screen.getByRole('button', { name: 'Select columns' }));
       const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
-      fireEvent.click(showHideAllCheckbox);
+      await user.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal(['idBis']);
 
-      fireEvent.click(showHideAllCheckbox);
+      await user.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']);
     });
   });
 
   describe('prop: toggleAllMode', () => {
-    it('should toggle filtered columns when `toggleAllMode` is `filtered`', () => {
-      render(
+    it('should toggle filtered columns when `toggleAllMode` is `filtered`', async () => {
+      const { user } = render(
         <div style={{ width: 400, height: 300 }}>
           <DataGrid
             columns={[
@@ -411,17 +411,18 @@ describe('<DataGridPro /> - Columns visibility', () => {
 
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'firstName', 'lastName', 'age']);
       const button = screen.getByRole('button', { name: 'Select columns' });
-      act(() => button.focus());
-      fireEvent.click(button);
+      await user.click(button);
 
       const input = screen.getByPlaceholderText('Search');
-      fireEvent.change(input, { target: { value: 'name' } });
+      await user.type(input, 'name');
       const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
-      fireEvent.click(showHideAllCheckbox);
+      await user.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'age']);
 
-      fireEvent.change(input, { target: { value: 'firstName' } });
-      fireEvent.click(showHideAllCheckbox);
+      // clear the search before the new search
+      await user.clear(input);
+      await user.type(input, 'firstName');
+      await user.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'firstName', 'age']);
     });
   });
diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
index 9d7c37ee69789..2a1457da6821a 100644
--- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
@@ -22,7 +22,6 @@ import {
   getActiveCell,
   grid,
 } from 'test/utils/helperFn';
-import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -60,7 +59,7 @@ describe('<DataGrid /> - Row selection', () => {
   }
 
   // Context: https://github.com/mui/mui-x/issues/15079
-  it('should not call `onRowSelectionModelChange` twice when using filterMode="server"', () => {
+  it('should not call `onRowSelectionModelChange` twice when using filterMode="server"', async () => {
     const onRowSelectionModelChange = spy();
     function TestDataGrid() {
       const [, setRowSelectionModel] = React.useState<GridRowSelectionModel>([]);
@@ -77,25 +76,25 @@ describe('<DataGrid /> - Row selection', () => {
         />
       );
     }
-    render(<TestDataGrid />);
-    fireEvent.click(getCell(0, 0).querySelector('input')!);
+    const { user } = render(<TestDataGrid />);
+    await user.click(getCell(0, 0).querySelector('input')!);
     expect(onRowSelectionModelChange.callCount).to.equal(1);
   });
 
   describe('prop: checkboxSelection = false (single selection)', () => {
-    it('should select one row at a time on click WITHOUT ctrl or meta pressed', () => {
-      render(<TestDataGridSelection />);
-      fireUserEvent.mousePress(getCell(0, 0));
+    it('should select one row at a time on click WITHOUT ctrl or meta pressed', async () => {
+      const { user } = render(<TestDataGridSelection />);
+      await user.click(getCell(0, 0));
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireUserEvent.mousePress(getCell(1, 0));
+      await user.click(getCell(1, 0));
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
 
-    it(`should deselect the selected row on click`, () => {
-      render(<TestDataGridSelection />);
-      fireEvent.click(getCell(0, 0));
+    it(`should deselect the selected row on click`, async () => {
+      const { user } = render(<TestDataGridSelection />);
+      await user.click(getCell(0, 0));
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireEvent.click(getCell(0, 0));
+      await user.click(getCell(0, 0));
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
 
@@ -117,34 +116,36 @@ describe('<DataGrid /> - Row selection', () => {
       });
     });
 
-    it('should not select a range with shift pressed', () => {
-      render(<TestDataGridSelection />);
-      fireEvent.click(getCell(0, 0));
+    it('should not select a range with shift pressed', async () => {
+      const { user } = render(<TestDataGridSelection />);
+      await user.click(getCell(0, 0));
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireEvent.click(getCell(2, 0), { shiftKey: true });
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(2, 0));
+      await user.keyboard('{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([2]);
     });
   });
 
   describe('prop: checkboxSelection = false (single selection), with keyboard events', () => {
-    it('should select one row at a time on Shift + Space', () => {
-      render(<TestDataGridSelection disableRowSelectionOnClick />);
+    it('should select one row at a time on Shift + Space', async () => {
+      const { user } = render(<TestDataGridSelection disableRowSelectionOnClick />);
 
       const cell0 = getCell(0, 0);
-      fireUserEvent.mousePress(cell0);
-      fireEvent.keyDown(cell0, { key: ' ', shiftKey: true });
+      await user.click(cell0);
+      await user.keyboard('{Shift>}[Space]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([0]);
 
       const cell1 = getCell(1, 0);
-      fireUserEvent.mousePress(cell1);
-      fireEvent.keyDown(cell1, { key: ' ', shiftKey: true });
+      await user.click(cell1);
+      await user.keyboard('{Shift>}[Space]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
 
     [GridEditModes.Cell, GridEditModes.Row].forEach((editMode) => {
-      it(`should select row on Shift + Space without starting editing the ${editMode}`, () => {
+      it(`should select row on Shift + Space without starting editing the ${editMode}`, async () => {
         const onCellEditStart = spy();
-        render(
+        const { user } = render(
           <TestDataGridSelection
             columns={[
               { field: 'id', type: 'number' },
@@ -162,46 +163,43 @@ describe('<DataGrid /> - Row selection', () => {
         expect(onCellEditStart.callCount).to.equal(0);
 
         const cell01 = getCell(0, 1);
-        fireUserEvent.mousePress(cell01);
+        await user.click(cell01);
 
-        fireEvent.keyDown(cell01, { key: ' ', shiftKey: true });
+        await user.keyboard('{Shift>}[Space]{/Shift}');
 
         expect(onCellEditStart.callCount).to.equal(0);
         expect(getSelectedRowIds()).to.deep.equal([0]);
 
         const cell11 = getCell(1, 1);
-        fireUserEvent.mousePress(cell11);
-        fireEvent.keyDown(cell11, { key: ' ', shiftKey: true });
+        await user.click(cell11);
+        await user.keyboard('{Shift>}[Space]{/Shift}');
 
         expect(onCellEditStart.callCount).to.equal(0);
         expect(getSelectedRowIds()).to.deep.equal([1]);
       });
     });
 
-    it(`should deselect the selected row on Shift + Space`, () => {
-      render(<TestDataGridSelection disableRowSelectionOnClick />);
+    it(`should deselect the selected row on Shift + Space`, async () => {
+      const { user } = render(<TestDataGridSelection disableRowSelectionOnClick />);
       const cell00 = getCell(0, 0);
-      fireUserEvent.mousePress(cell00);
+      await user.click(cell00);
 
-      fireEvent.keyDown(cell00, { key: ' ', shiftKey: true });
+      await user.keyboard('{Shift>}[Space]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([0]);
 
-      fireEvent.keyDown(cell00, { key: ' ', shiftKey: true });
+      await user.keyboard('{Shift>}[Space]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
 
-    it('should not select a range with shift pressed', () => {
-      render(<TestDataGridSelection disableRowSelectionOnClick />);
+    it('should not select a range with shift pressed', async () => {
+      const { user } = render(<TestDataGridSelection disableRowSelectionOnClick />);
       const cell00 = getCell(0, 0);
-      fireUserEvent.mousePress(cell00);
+      await user.click(cell00);
 
-      fireEvent.keyDown(cell00, { key: ' ', shiftKey: true });
+      await user.keyboard('{Shift>}[Space]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([0]);
 
-      fireEvent.keyDown(cell00, {
-        key: 'ArrowDown',
-        shiftKey: true,
-      });
+      await user.keyboard('{Shift>}[ArrowDown]{/Shift}');
 
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
@@ -217,47 +215,47 @@ describe('<DataGrid /> - Row selection', () => {
       expect(getColumnHeaderCell(0).querySelectorAll('input')).to.have.length(1);
     });
 
-    it('should check then uncheck when clicking twice the row', () => {
-      render(<TestDataGridSelection checkboxSelection />);
+    it('should check then uncheck when clicking twice the row', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
 
-      fireEvent.click(getCell(0, 1));
+      await user.click(getCell(0, 1));
       expect(getSelectedRowIds()).to.deep.equal([0]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', true);
 
-      fireEvent.click(getCell(0, 1));
+      await user.click(getCell(0, 1));
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
     });
 
-    it('should check and uncheck when double clicking the checkbox', () => {
-      render(<TestDataGridSelection checkboxSelection />);
+    it('should check and uncheck when double clicking the checkbox', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
 
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(getSelectedRowIds()).to.deep.equal([0]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', true);
 
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
     });
 
     it('should set focus on the cell when clicking the checkbox', async () => {
-      render(<TestDataGridSelection checkboxSelection />);
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
       expect(getActiveCell()).to.equal(null);
 
       const checkboxInput = getCell(0, 0).querySelector('input');
 
-      fireUserEvent.mousePress(checkboxInput!);
+      await user.click(checkboxInput!);
 
       await waitFor(() => expect(getActiveCell()).to.equal('0-0'));
     });
 
-    it('should select all visible rows regardless of pagination', () => {
-      render(
+    it('should select all visible rows regardless of pagination', async () => {
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           initialState={{ pagination: { paginationModel: { pageSize: 1 } } }}
@@ -265,9 +263,9 @@ describe('<DataGrid /> - Row selection', () => {
         />,
       );
       const selectAllCheckbox = screen.getByRole('checkbox', { name: 'Select all rows' });
-      fireEvent.click(selectAllCheckbox);
+      await user.click(selectAllCheckbox);
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(screen.getByRole('button', { name: /next page/i }));
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
 
@@ -287,53 +285,67 @@ describe('<DataGrid /> - Row selection', () => {
       expect(getRow(1).querySelector('input')).to.have.property('disabled', true);
     });
 
-    it('should select a range with shift pressed when clicking the row', () => {
-      render(<TestDataGridSelection checkboxSelection />);
-      fireEvent.click(getCell(0, 1));
+    it('should select a range with shift pressed when clicking the row', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
+      await user.click(getCell(0, 1));
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireEvent.click(getCell(2, 1), { shiftKey: true });
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(2, 1));
       expect(getSelectedRowIds()).to.deep.equal([0, 1, 2]);
     });
 
-    it('should select a range with shift pressed when clicking the checkbox', () => {
-      render(<TestDataGridSelection checkboxSelection />);
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+    it('should select a range with shift pressed when clicking the checkbox', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireEvent.click(getCell(2, 0).querySelector('input')!, { shiftKey: true });
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(2, 0).querySelector('input')!);
       expect(getSelectedRowIds()).to.deep.equal([0, 1, 2]);
     });
 
-    it('should unselect from last clicked cell to cell after clicked cell if clicking inside a selected range', () => {
-      render(<TestDataGridSelection checkboxSelection disableVirtualization />);
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+    it('should unselect from last clicked cell to cell after clicked cell if clicking inside a selected range', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection disableVirtualization />);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireEvent.click(getCell(3, 0).querySelector('input')!, { shiftKey: true });
+
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(3, 0).querySelector('input')!);
+      await user.keyboard('{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]);
-      fireEvent.click(getCell(1, 0).querySelector('input')!, { shiftKey: true });
+
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(1, 0).querySelector('input')!);
+      await user.keyboard('{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([0, 1]);
     });
 
-    it('should not change the selection with shift pressed when clicking on the last row of the selection', () => {
-      render(<TestDataGridSelection checkboxSelection />);
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+    it('should not change the selection with shift pressed when clicking on the last row of the selection', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireEvent.click(getCell(2, 0).querySelector('input')!, { shiftKey: true });
+
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(2, 0).querySelector('input')!);
+      await user.keyboard('{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([0, 1, 2]);
-      fireEvent.click(getCell(2, 0).querySelector('input')!, { shiftKey: true });
+
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(2, 0).querySelector('input')!);
+      await user.keyboard('{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([0, 1, 2]);
     });
 
-    it('should reset selected rows when turning off checkboxSelection', () => {
-      const { setProps } = render(<TestDataGridSelection checkboxSelection />);
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+    it('should reset selected rows when turning off checkboxSelection', async () => {
+      const { setProps, user } = render(<TestDataGridSelection checkboxSelection />);
+      await user.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(getSelectedRowIds()).to.deep.equal([0, 1]);
       setProps({ checkboxSelection: false });
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
 
-    it('should reset row selection in the current page as selected when turning off checkboxSelection', () => {
-      const { setProps } = render(
+    it('should reset row selection in the current page as selected when turning off checkboxSelection', async () => {
+      const { setProps, user } = render(
         <TestDataGridSelection
           checkboxSelection
           pagination
@@ -341,42 +353,46 @@ describe('<DataGrid /> - Row selection', () => {
           pageSizeOptions={[2]}
         />,
       );
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(getCell(2, 0).querySelector('input')!);
       expect(screen.getByText('2 rows selected')).not.to.equal(null);
       setProps({ checkboxSelection: false });
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(screen.queryByText('2 row selected')).to.equal(null);
     });
 
-    it('should set the correct aria-label on the column header checkbox', () => {
-      render(<TestDataGridSelection checkboxSelection />);
+    it('should set the correct aria-label on the column header checkbox', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
       expect(screen.queryByRole('checkbox', { name: 'Unselect all rows' })).to.equal(null);
       expect(screen.queryByRole('checkbox', { name: 'Select all rows' })).not.to.equal(null);
-      fireEvent.click(screen.getByRole('checkbox', { name: 'Select all rows' }));
+      await user.click(screen.getByRole('checkbox', { name: 'Select all rows' }));
       expect(screen.queryByRole('checkbox', { name: 'Select all rows' })).to.equal(null);
       expect(screen.queryByRole('checkbox', { name: 'Unselect all rows' })).not.to.equal(null);
     });
 
-    it('should set the correct aria-label on the cell checkbox', () => {
-      render(<TestDataGridSelection checkboxSelection rows={[{ id: 0, name: 'React' }]} />);
+    it('should set the correct aria-label on the cell checkbox', async () => {
+      const { user } = render(
+        <TestDataGridSelection checkboxSelection rows={[{ id: 0, name: 'React' }]} />,
+      );
       expect(screen.queryByRole('checkbox', { name: 'Unselect row' })).to.equal(null);
       expect(screen.queryByRole('checkbox', { name: 'Select row' })).not.to.equal(null);
-      fireEvent.click(screen.getByRole('checkbox', { name: 'Select row' }));
+      await user.click(screen.getByRole('checkbox', { name: 'Select row' }));
       expect(screen.queryByRole('checkbox', { name: 'Select row' })).to.equal(null);
       expect(screen.queryByRole('checkbox', { name: 'Unselect row' })).not.to.equal(null);
     });
 
-    it('should not select more than one row when disableMultipleRowSelection = true', () => {
-      render(<TestDataGridSelection checkboxSelection disableMultipleRowSelection />);
+    it('should not select more than one row when disableMultipleRowSelection = true', async () => {
+      const { user } = render(
+        <TestDataGridSelection checkboxSelection disableMultipleRowSelection />,
+      );
       const input1 = getCell(0, 0).querySelector('input')!;
-      fireEvent.click(input1);
+      await user.click(input1);
       expect(input1.checked).to.equal(true);
 
       const input2 = getCell(1, 0).querySelector('input')!;
-      fireEvent.click(input2);
+      await user.click(input2);
       expect(input1.checked).to.equal(false);
       expect(input2.checked).to.equal(true);
     });
@@ -423,6 +439,7 @@ describe('<DataGrid /> - Row selection', () => {
           }}
         />,
       );
+
       const selectAllCheckbox = screen.getByRole('checkbox', { name: 'Select all rows' });
       fireEvent.click(selectAllCheckbox);
       await waitFor(() => {
@@ -430,6 +447,7 @@ describe('<DataGrid /> - Row selection', () => {
       });
       expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected');
 
+      // Click on Menu in id header column
       fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), {
         target: { value: 1 },
       });
@@ -452,102 +470,115 @@ describe('<DataGrid /> - Row selection', () => {
       expect(grid('selectedRowCount')?.textContent).to.equal('1 row selected');
     });
 
-    it('should select all the rows when clicking on "Select All" checkbox in indeterminate state', () => {
-      render(<TestDataGridSelection checkboxSelection />);
+    it('should select all the rows when clicking on "Select All" checkbox in indeterminate state', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
       const selectAllCheckbox = screen.getByRole('checkbox', { name: 'Select all rows' });
-      fireEvent.click(screen.getAllByRole('checkbox', { name: /select row/i })[0]);
-      fireEvent.click(selectAllCheckbox);
+      await user.click(screen.getAllByRole('checkbox', { name: /select row/i })[0]);
+      await user.click(selectAllCheckbox);
       expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]);
     });
   });
 
   describe('prop: checkboxSelection = true (multi selection), with keyboard events', () => {
-    it('should select row below when pressing "ArrowDown" + shiftKey', () => {
-      render(<TestDataGridSelection checkboxSelection />);
-      fireUserEvent.mousePress(getCell(2, 1));
+    it('should select row below when pressing "ArrowDown" + shiftKey', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
+      await user.click(getCell(2, 1));
       expect(getSelectedRowIds()).to.deep.equal([2]);
-      fireEvent.keyDown(getCell(2, 1), { key: 'ArrowDown', shiftKey: true });
+      await user.keyboard('{Shift>}[ArrowDown]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([2, 3]);
-      fireEvent.keyDown(getCell(3, 1), { key: 'ArrowDown' });
+
+      await user.click(getCell(3, 1));
+      await user.keyboard('{ArrowDown}');
       expect(getSelectedRowIds()).to.deep.equal([2, 3]); // Already on the last row
     });
 
-    it('should unselect previous row when pressing "ArrowDown" + shiftKey', () => {
-      render(<TestDataGridSelection checkboxSelection />);
-      fireUserEvent.mousePress(getCell(3, 1));
+    it('should unselect previous row when pressing "ArrowDown" + shiftKey', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
+      await user.click(getCell(3, 1));
       expect(getSelectedRowIds()).to.deep.equal([3]);
 
-      fireUserEvent.mousePress(getCell(1, 1), { shiftKey: true });
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(1, 1));
+      await user.keyboard('{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]);
-      fireEvent.keyDown(getCell(1, 1), { key: 'ArrowDown', shiftKey: true });
+
+      await user.keyboard('{Shift>}[ArrowDown]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([2, 3]);
     });
 
-    it('should not unselect row above when pressing "ArrowDown" + shiftKey', () => {
-      render(<TestDataGridSelection checkboxSelection />);
-      fireUserEvent.mousePress(getCell(1, 1));
+    it('should not unselect row above when pressing "ArrowDown" + shiftKey', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
+      await user.click(getCell(1, 1));
       expect(getSelectedRowIds()).to.deep.equal([1]);
-      fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true });
+
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(2, 1));
+      await user.keyboard('{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([1, 2]);
-      fireEvent.keyDown(getCell(2, 1), { key: 'ArrowDown', shiftKey: true });
+
+      await user.keyboard('{Shift>}[ArrowDown]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]);
-      fireEvent.keyDown(getCell(3, 1), { key: 'ArrowDown' });
+
+      await user.keyboard('{ArrowDown/}');
       expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]); // Already on the last row
     });
 
-    it('should unselect previous row when pressing "ArrowUp" + shiftKey', () => {
-      render(<TestDataGridSelection checkboxSelection />);
-      fireUserEvent.mousePress(getCell(2, 1));
+    it('should unselect previous row when pressing "ArrowUp" + shiftKey', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
+      await user.click(getCell(2, 1));
       expect(getSelectedRowIds()).to.deep.equal([2]);
-      fireUserEvent.mousePress(getCell(3, 1), { shiftKey: true });
+
+      await user.keyboard('{Shift>}');
+      await user.click(getCell(3, 1));
+      await user.keyboard('{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([2, 3]);
-      fireEvent.keyDown(getCell(3, 1), { key: 'ArrowUp', shiftKey: true });
+
+      await user.keyboard('{Shift>}[ArrowUp]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([2]);
     });
 
-    it('should add new row to the selection when pressing Shift+Space', () => {
-      render(<TestDataGridSelection checkboxSelection disableRowSelectionOnClick />);
+    it('should add new row to the selection when pressing Shift+Space', async () => {
+      const { user } = render(
+        <TestDataGridSelection checkboxSelection disableRowSelectionOnClick />,
+      );
 
       expect(getSelectedRowIds()).to.deep.equal([]);
 
       const cell21 = getCell(2, 1);
-      fireUserEvent.mousePress(cell21);
-      fireEvent.keyDown(cell21, {
-        key: ' ',
-        shiftKey: true,
-      });
+      await user.click(cell21);
+      await user.keyboard('{Shift>}[Space]{/Shift}');
 
       expect(getSelectedRowIds()).to.deep.equal([2]);
 
       const cell11 = getCell(1, 1);
-      fireUserEvent.mousePress(cell11);
-      fireEvent.keyDown(cell11, {
-        key: ' ',
-        shiftKey: true,
-      });
+      await user.click(cell11);
+      await user.keyboard('{Shift>}[Space]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([1, 2]);
     });
 
-    it('should not jump during scroll while the focus is on the checkbox', function test() {
+    it('should not jump during scroll while the focus is on the checkbox', async function test() {
       if (isJSDOM) {
         this.skip(); // HTMLElement.focus() only scrolls to the element on a real browser
       }
       const data = getBasicGridData(20, 1);
-      render(<TestDataGridSelection {...data} rowHeight={50} checkboxSelection hideFooter />);
+      const { user } = render(
+        <TestDataGridSelection {...data} rowHeight={50} checkboxSelection hideFooter />,
+      );
       const checkboxes = screen.queryAllByRole('checkbox', { name: /select row/i });
-      fireUserEvent.mousePress(checkboxes[0]);
+      await user.click(checkboxes[0]);
       expect(checkboxes[0]).toHaveFocus();
-      fireEvent.keyDown(checkboxes[0], { key: 'ArrowDown' });
-      fireEvent.keyDown(checkboxes[1], { key: 'ArrowDown' });
-      fireEvent.keyDown(checkboxes[2], { key: 'ArrowDown' });
+
+      await user.keyboard('{ArrowDown}');
+      await user.keyboard('{ArrowDown}');
+      await user.keyboard('{ArrowDown}');
       const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
       virtualScroller.scrollTop = 250; // Scroll 5 rows
       virtualScroller.dispatchEvent(new Event('scroll'));
       expect(virtualScroller.scrollTop).to.equal(250);
     });
 
-    it('should set tabindex=0 on the checkbox when the it receives focus', () => {
-      render(<TestDataGridSelection checkboxSelection />);
+    it('should set tabindex=0 on the checkbox when the it receives focus', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection />);
       const checkbox = screen.getAllByRole('checkbox', { name: /select row/i })[0];
       const checkboxCell = getCell(0, 0);
       const secondCell = getCell(0, 1);
@@ -555,32 +586,28 @@ describe('<DataGrid /> - Row selection', () => {
       expect(checkboxCell).to.have.attribute('tabindex', '-1');
       expect(secondCell).to.have.attribute('tabindex', '-1');
 
-      fireUserEvent.mousePress(secondCell);
+      await user.click(secondCell);
       expect(secondCell).to.have.attribute('tabindex', '0');
 
-      fireEvent.keyDown(secondCell, { key: 'ArrowLeft' });
+      await user.keyboard('{ArrowLeft}');
       expect(secondCell).to.have.attribute('tabindex', '-1');
       // Ensure that checkbox has tabindex=0 and the cell has tabindex=-1
       expect(checkbox).to.have.attribute('tabindex', '0');
       expect(checkboxCell).to.have.attribute('tabindex', '-1');
     });
 
-    it('should select/unselect all rows when pressing space', () => {
-      render(<TestDataGridSelection checkboxSelection disableVirtualization />);
+    it('should select/unselect all rows when pressing space', async () => {
+      const { user } = render(<TestDataGridSelection checkboxSelection disableVirtualization />);
 
       const selectAllCell = document.querySelector<HTMLElement>(
         '[role="columnheader"][data-field="__check__"] input',
       )!;
-      act(() => selectAllCell.focus());
+      await act(() => selectAllCell.focus());
 
-      fireEvent.keyDown(selectAllCell, {
-        key: ' ',
-      });
+      await user.keyboard('[Space]');
 
       expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]);
-      fireEvent.keyDown(selectAllCell, {
-        key: ' ',
-      });
+      await user.keyboard('[Space]');
 
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
@@ -608,13 +635,13 @@ describe('<DataGrid /> - Row selection', () => {
   });
 
   describe('prop: isRowSelectable', () => {
-    it('should update the selected rows when the isRowSelectable prop changes', () => {
-      const { setProps } = render(
+    it('should update the selected rows when the isRowSelectable prop changes', async () => {
+      const { setProps, user } = render(
         <TestDataGridSelection isRowSelectable={() => true} checkboxSelection />,
       );
 
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
 
       expect(getSelectedRowIds()).to.deep.equal([0, 1]);
 
@@ -672,14 +699,14 @@ describe('<DataGrid /> - Row selection', () => {
       }).not.toErrorDev();
     });
 
-    it('should set the "Select all" checkbox to selected state on clicking even when some rows are not selectable', () => {
-      render(
+    it('should set the "Select all" checkbox to selected state on clicking even when some rows are not selectable', async () => {
+      const { user } = render(
         <TestDataGridSelection
           checkboxSelection
           isRowSelectable={({ id }) => Number(id) % 2 === 0}
         />,
       );
-      fireEvent.click(getColumnHeaderCell(0).querySelector('input')!);
+      await user.click(getColumnHeaderCell(0).querySelector('input')!);
       expect(getColumnHeaderCell(0).querySelector('input')).to.have.property('checked', true);
     });
   });
@@ -778,9 +805,9 @@ describe('<DataGrid /> - Row selection', () => {
       expect(onRowSelectionModelChange.callCount).to.equal(0);
     });
 
-    it('should call onRowSelectionModelChange with an empty array if no row is selectable in the current page when turning off checkboxSelection', () => {
+    it('should call onRowSelectionModelChange with an empty array if no row is selectable in the current page when turning off checkboxSelection', async () => {
       const onRowSelectionModelChange = spy();
-      const { setProps } = render(
+      const { setProps, user } = render(
         <TestDataGridSelection
           checkboxSelection
           pagination
@@ -789,18 +816,18 @@ describe('<DataGrid /> - Row selection', () => {
           onRowSelectionModelChange={onRowSelectionModelChange}
         />,
       );
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
       expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([0]);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
-      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      await user.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(getCell(2, 0).querySelector('input')!);
       expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([0, 2]);
       setProps({ checkboxSelection: false, isRowSelectable: () => false });
       expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([]);
     });
 
-    it('should call onRowSelectionModelChange with an empty array if there is no selected row in the current page when turning off checkboxSelection', () => {
+    it('should call onRowSelectionModelChange with an empty array if there is no selected row in the current page when turning off checkboxSelection', async () => {
       const onRowSelectionModelChange = spy();
-      const { setProps } = render(
+      const { setProps, user } = render(
         <TestDataGridSelection
           checkboxSelection
           initialState={{ pagination: { paginationModel: { pageSize: 2 } } }}
@@ -808,10 +835,10 @@ describe('<DataGrid /> - Row selection', () => {
           onRowSelectionModelChange={onRowSelectionModelChange}
         />,
       );
-      fireEvent.click(getCell(0, 0).querySelector('input')!);
-      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      await user.click(getCell(0, 0).querySelector('input')!);
+      await user.click(getCell(1, 0).querySelector('input')!);
       expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([0, 1]);
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+      await user.click(screen.getByRole('button', { name: /next page/i }));
       setProps({ checkboxSelection: false });
       expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([]);
     });
@@ -825,32 +852,32 @@ describe('<DataGrid /> - Row selection', () => {
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
 
-    it('should update the selection when neither the model nor the onChange are set', () => {
-      render(<TestDataGridSelection />);
-      fireEvent.click(getCell(0, 0));
+    it('should update the selection when neither the model nor the onChange are set', async () => {
+      const { user } = render(<TestDataGridSelection />);
+      await user.click(getCell(0, 0));
       expect(getSelectedRowIds()).to.deep.equal([0]);
     });
 
-    it('should not update the selection model when the rowSelectionModel prop is set', () => {
+    it('should not update the selection model when the rowSelectionModel prop is set', async () => {
       const rowSelectionModel: GridInputRowSelectionModel = [1];
-      render(<TestDataGridSelection rowSelectionModel={rowSelectionModel} />);
+      const { user } = render(<TestDataGridSelection rowSelectionModel={rowSelectionModel} />);
       expect(getSelectedRowIds()).to.deep.equal([1]);
 
-      fireEvent.click(getCell(0, 0));
+      await user.click(getCell(0, 0));
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
 
-    it('should update the selection when the model is not set, but the onChange is set', () => {
+    it('should update the selection when the model is not set, but the onChange is set', async () => {
       const onModelChange = spy();
-      render(<TestDataGridSelection onRowSelectionModelChange={onModelChange} />);
+      const { user } = render(<TestDataGridSelection onRowSelectionModelChange={onModelChange} />);
 
-      fireEvent.click(getCell(0, 0));
+      await user.click(getCell(0, 0));
       expect(getSelectedRowIds()).to.deep.equal([0]);
       expect(onModelChange.callCount).to.equal(1);
       expect(onModelChange.firstCall.firstArg).to.deep.equal([0]);
     });
 
-    it('should control selection state when the model and the onChange are set', () => {
+    it('should control selection state when the model and the onChange are set', async () => {
       function ControlCase() {
         const [rowSelectionModel, setRowSelectionModel] = React.useState<any>([]);
 
@@ -871,9 +898,9 @@ describe('<DataGrid /> - Row selection', () => {
         );
       }
 
-      render(<ControlCase />);
+      const { user } = render(<ControlCase />);
       expect(getSelectedRowIds()).to.deep.equal([]);
-      fireEvent.click(getCell(1, 1));
+      await user.click(getCell(1, 1));
       expect(getSelectedRowIds()).to.deep.equal([1, 2]);
     });
 
@@ -898,25 +925,31 @@ describe('<DataGrid /> - Row selection', () => {
       }
 
       render(<ControlCase />);
-      expect(() => act(() => apiRef.current.setRowSelectionModel([0, 1]))).not.to.throw();
+      expect(() =>
+        act(() => {
+          apiRef.current.setRowSelectionModel([0, 1]);
+        }),
+      ).not.to.throw();
     });
   });
 
   describe('prop: rowSelection = false', () => {
-    it('should not select rows when clicking the checkbox', () => {
-      render(<TestDataGridSelection rowSelection={false} checkboxSelection />);
+    it('should not select rows when clicking the checkbox', async () => {
+      const { user } = render(<TestDataGridSelection rowSelection={false} checkboxSelection />);
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
-      fireEvent.click(getCell(0, 1));
+      await user.click(getCell(0, 1));
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
     });
 
-    it('should not select rows with Shift + Space', () => {
-      render(<TestDataGridSelection rowSelection={false} disableRowSelectionOnClick />);
+    it('should not select rows with Shift + Space', async () => {
+      const { user } = render(
+        <TestDataGridSelection rowSelection={false} disableRowSelectionOnClick />,
+      );
       const cell0 = getCell(0, 0);
-      fireUserEvent.mousePress(cell0);
-      fireEvent.keyDown(cell0, { key: ' ', shiftKey: true });
+      await user.click(cell0);
+      await user.keyboard('{Shift>}[Space]{/Shift}');
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
 
@@ -927,28 +960,28 @@ describe('<DataGrid /> - Row selection', () => {
   });
 
   describe('accessibility', () => {
-    it('should add aria-selected attributes to the selectable rows', () => {
-      render(<TestDataGridSelection />);
+    it('should add aria-selected attributes to the selectable rows', async () => {
+      const { user } = render(<TestDataGridSelection />);
 
       // Select the first row
-      fireUserEvent.mousePress(getCell(0, 0));
+      await user.click(getCell(0, 0));
       expect(getRow(0).getAttribute('aria-selected')).to.equal('true');
       expect(getRow(1).getAttribute('aria-selected')).to.equal('false');
     });
 
-    it('should not add aria-selected attributes if the row selection is disabled', () => {
-      render(<TestDataGridSelection rowSelection={false} />);
+    it('should not add aria-selected attributes if the row selection is disabled', async () => {
+      const { user } = render(<TestDataGridSelection rowSelection={false} />);
       expect(getRow(0).getAttribute('aria-selected')).to.equal(null);
 
       // Try to select the first row
-      fireUserEvent.mousePress(getCell(0, 0));
+      await user.click(getCell(0, 0));
       // nothing should change
       expect(getRow(0).getAttribute('aria-selected')).to.equal(null);
     });
   });
 
   describe('performance', () => {
-    it('should not rerender unrelated nodes', () => {
+    it('should not rerender unrelated nodes', async () => {
       // Couldn't use <RenderCounter> because we need to track multiple components
       let commits: any[] = [];
       function CustomCell(props: any) {
@@ -960,7 +993,7 @@ describe('<DataGrid /> - Row selection', () => {
         return <div>Hello</div>;
       }
 
-      render(
+      const { user } = render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid
             columns={[
@@ -983,7 +1016,7 @@ describe('<DataGrid /> - Row selection', () => {
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
       commits = [];
-      fireEvent.click(getCell(0, 1));
+      await user.click(getCell(0, 1));
       expect(getSelectedRowIds()).to.deep.equal([0]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', true);
       // It shouldn't rerender any of the custom cells
diff --git a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx
index 771ee43a173d9..773c58f4889b4 100644
--- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -427,8 +427,8 @@ describe('<DataGrid /> - Rows', () => {
       expect(deleteButton).toHaveFocus();
     });
 
-    it('should set the correct tabIndex to the focused button', () => {
-      render(
+    it('should set the correct tabIndex to the focused button', async () => {
+      const { user } = render(
         <TestCase
           getActions={() => [
             <GridActionsCellItem icon={<span />} label="print" />,
@@ -438,9 +438,11 @@ describe('<DataGrid /> - Rows', () => {
       );
       const firstCell = getCell(0, 0);
       const secondCell = getCell(0, 1);
-      firstCell.focus();
+      act(() => {
+        firstCell.focus();
+      });
 
-      fireEvent.keyDown(firstCell, { key: 'ArrowRight' });
+      await user.keyboard('{ArrowRight}');
       expect(secondCell).to.have.property('tabIndex', -1);
 
       const printButton = screen.getByRole('menuitem', { name: 'print' });
@@ -448,7 +450,10 @@ describe('<DataGrid /> - Rows', () => {
       expect(printButton).to.have.property('tabIndex', 0);
       expect(menuButton).to.have.property('tabIndex', -1);
 
-      fireEvent.keyDown(printButton, { key: 'ArrowRight' });
+      act(() => {
+        printButton.focus();
+      });
+      await user.keyboard('{ArrowRight}');
       expect(printButton).to.have.property('tabIndex', -1);
       expect(menuButton).to.have.property('tabIndex', 0);
     });
diff --git a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx
index c57d2ec690c4c..5779fa9a59ccf 100644
--- a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx
@@ -119,7 +119,7 @@ describe('<DataGrid /> - Sorting', () => {
     expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']);
   });
 
-  it('should allow clearing the current sorting using `sortColumn` idempotently', () => {
+  it('should allow clearing the current sorting using `sortColumn` idempotently', async () => {
     let apiRef: React.MutableRefObject<GridApi>;
     function TestCase() {
       apiRef = useGridApiRef();
@@ -133,20 +133,20 @@ describe('<DataGrid /> - Sorting', () => {
       );
     }
 
-    render(<TestCase />);
+    const { user } = render(<TestCase />);
     expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']);
     const header = getColumnHeaderCell(0);
 
     // Trigger a sort using the header
-    fireEvent.click(header);
+    await user.click(header);
     expect(getColumnValues(0)).to.deep.equal(['0', '5', '10']);
 
     // Clear the value using `apiRef`
-    act(() => apiRef.current.sortColumn('id', null));
+    await act(() => apiRef.current.sortColumn('id', null));
     expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']);
 
     // Check the behavior is idempotent
-    act(() => apiRef.current.sortColumn('id', null));
+    await act(() => apiRef.current.sortColumn('id', null));
     expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']);
   });
 
diff --git a/packages/x-data-grid/tsconfig.json b/packages/x-data-grid/tsconfig.json
index a95beb1e8020a..08e4c0e2576ce 100644
--- a/packages/x-data-grid/tsconfig.json
+++ b/packages/x-data-grid/tsconfig.json
@@ -7,7 +7,8 @@
       "chai-dom",
       "mocha",
       "node"
-    ]
+    ],
+    "skipLibCheck": true
   },
   "include": ["src/**/*"]
 }
diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json
index 1fa962347f39d..5f5cdea6548d6 100644
--- a/packages/x-date-pickers-pro/package.json
+++ b/packages/x-date-pickers-pro/package.json
@@ -97,8 +97,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@types/luxon": "^3.4.2",
     "@types/prop-types": "^15.7.14",
     "date-fns": "^2.30.0",
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
index 88fef68210bc5..768ba22d70b81 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
@@ -51,12 +51,12 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr
    * Date tab icon.
    * @default DateRangeIcon
    */
-  dateIcon?: React.ReactElement;
+  dateIcon?: React.ReactElement<any>;
   /**
    * Time tab icon.
    * @default TimeIcon
    */
-  timeIcon?: React.ReactElement;
+  timeIcon?: React.ReactElement<any>;
   /**
    * Override or extend the styles applied to the component.
    */
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx
index 653a818b33b66..a445d9242e3ec 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import {
   PickerSelectionState,
@@ -48,10 +47,7 @@ function DateTimeRangePickerTimeWrapper<
     Omit<BaseClockProps<TView>, 'value' | 'defaultValue' | 'onChange'>,
     'views'
   >,
->(
-  props: DateTimeRangePickerTimeWrapperProps<TView, TComponentProps>,
-  ref: React.Ref<HTMLDivElement>,
-) {
+>(props: DateTimeRangePickerTimeWrapperProps<TView, TComponentProps>) {
   const utils = useUtils();
 
   const {
@@ -100,7 +96,6 @@ function DateTimeRangePickerTimeWrapper<
 
   return viewRenderer({
     ...other,
-    ref,
     views,
     onViewChange,
     value: currentValue,
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
index 77f2fa03865eb..1f2a2d64da882 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
@@ -80,7 +80,7 @@ export const useDesktopRangePicker = <
     fieldType === 'single-input' ? singleInputFieldRef : undefined,
   );
 
-  let fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue>>;
+  let fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
   if (fieldType === 'single-input') {
     fieldRef = singleInputFieldRef;
   } else if (rangePosition === 'start') {
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
index 72e8f2ca501d9..a4f1ab1bfd620 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
@@ -112,9 +112,9 @@ export interface UseEnrichedRangePickerFieldPropsParams<
   currentView?: TView | null;
   initialView?: TView;
   onViewChange?: (view: TView) => void;
-  startFieldRef: React.RefObject<FieldRef<PickerValue>>;
-  endFieldRef: React.RefObject<FieldRef<PickerValue>>;
-  singleInputFieldRef: React.RefObject<FieldRef<PickerRangeValue>>;
+  startFieldRef: React.RefObject<FieldRef<PickerValue> | null>;
+  endFieldRef: React.RefObject<FieldRef<PickerValue> | null>;
+  singleInputFieldRef: React.RefObject<FieldRef<PickerRangeValue> | null>;
 }
 
 const useMultiInputFieldSlotProps = <
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts
index b5fb7e3f74f05..59956a8c633b1 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts
@@ -17,9 +17,20 @@ interface UseMultiInputFieldSelectedSectionsParams
   unstableEndFieldRef?: React.Ref<FieldRef<PickerValue>>;
 }
 
+interface UseMultiInputFieldSelectedSectionsResponseItem {
+  unstableFieldRef?: React.Ref<FieldRef<PickerValue>>;
+  selectedSections: FieldSelectedSections;
+  onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
+}
+
+interface UseMultiInputFieldSelectedSectionsResponse {
+  start: UseMultiInputFieldSelectedSectionsResponseItem;
+  end: UseMultiInputFieldSelectedSectionsResponseItem;
+}
+
 export const useMultiInputFieldSelectedSections = (
   params: UseMultiInputFieldSelectedSectionsParams,
-) => {
+): UseMultiInputFieldSelectedSectionsResponse => {
   const unstableEndFieldRef = React.useRef<FieldRef<PickerValue>>(null);
   const handleUnstableEndFieldRef = useForkRef(params.unstableEndFieldRef, unstableEndFieldRef);
 
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts b/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts
index 4b71d9e2ecb74..2926f33934218 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts
@@ -31,7 +31,7 @@ export interface UseRangePositionResponse {
 
 export const useRangePosition = (
   props: UseRangePositionProps,
-  singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue>>,
+  singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue> | null>,
 ): UseRangePositionResponse => {
   const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json
index aaa2008c4b39c..fb86b5646fb66 100644
--- a/packages/x-date-pickers/package.json
+++ b/packages/x-date-pickers/package.json
@@ -99,8 +99,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@types/luxon": "^3.4.2",
     "@types/moment-hijri": "^2.1.4",
     "@types/moment-jalaali": "^0.7.9",
diff --git a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx
index 0ed043db403f2..c946a6162778d 100644
--- a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx
@@ -10,7 +10,7 @@ import {
 } from './pickersFadeTransitionGroupClasses';
 
 export interface PickersFadeTransitionGroupProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   className?: string;
   reduceAnimations: boolean;
   transKey: React.Key;
diff --git a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx b/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx
index 537edecb63f58..8938483e4f939 100644
--- a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx
@@ -28,7 +28,7 @@ export interface ExportedSlideTransitionProps {
 export interface SlideTransitionProps
   extends Omit<CSSTransitionProps, 'timeout'>,
     ExportedSlideTransitionProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   className?: string;
   reduceAnimations: boolean;
   slideDirection: SlideDirection;
@@ -150,7 +150,7 @@ export function PickersSlideTransition(inProps: SlideTransitionProps) {
   return (
     <PickersSlideTransitionRoot
       className={clsx(classes.root, className)}
-      childFactory={(element: React.ReactElement) =>
+      childFactory={(element: React.ReactElement<any>) =>
         React.cloneElement(element, {
           classNames: transitionClasses,
         })
diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
index 719a6561ca6a5..530dd479eb03f 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
@@ -77,8 +77,8 @@ export const addPositionPropertiesToSections = <TValue extends PickerValidValue>
 
 export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
   const isRtl = useRtl();
-  const focusTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
-  const selectionSyncTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const focusTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  const selectionSyncTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const {
     forwardedProps: {
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
index 375d13abaf27f..38f7ebd13b7d5 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
@@ -101,7 +101,7 @@ export interface UsePickerViewParams<
   propsFromPickerValue: UsePickerValueViewsResponse<TValue>;
   additionalViewProps: TAdditionalProps;
   autoFocusView: boolean;
-  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue>> | undefined;
+  fieldRef?: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
   /**
    * A function that intercepts the regular picker rendering.
    * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them.
diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx
index 4ff7b81044fb8..d4a97eb5a5a1a 100644
--- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx
+++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx
@@ -34,7 +34,6 @@ export const useStaticPicker = <
     ...pickerParams,
     props,
     autoFocusView: autoFocus ?? false,
-    fieldRef: undefined,
     localeText,
     additionalViewProps: {},
     variant: displayStaticWrapperAs,
diff --git a/packages/x-date-pickers/src/internals/hooks/useUtils.ts b/packages/x-date-pickers/src/internals/hooks/useUtils.ts
index 170075ddef741..814918372fcc6 100644
--- a/packages/x-date-pickers/src/internals/hooks/useUtils.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useUtils.ts
@@ -52,7 +52,7 @@ export const useDefaultDates = () => useLocalizationContext().defaultDates;
 export const useNow = (timezone: PickersTimezone): PickerValidDate => {
   const utils = useUtils();
 
-  const now = React.useRef() as React.MutableRefObject<PickerValidDate>;
+  const now = React.useRef<PickerValidDate>(undefined);
   if (now.current === undefined) {
     now.current = utils.date(undefined, timezone);
   }
diff --git a/packages/x-tree-view-pro/package.json b/packages/x-tree-view-pro/package.json
index 3f135485288e3..0ae77c2d75d64 100644
--- a/packages/x-tree-view-pro/package.json
+++ b/packages/x-tree-view-pro/package.json
@@ -73,8 +73,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@types/prop-types": "^15.7.14",
     "@types/use-sync-external-store": "^0.0.6",
     "rimraf": "^6.0.1"
diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json
index 14623a168e055..5ed57b405e1da 100644
--- a/packages/x-tree-view/package.json
+++ b/packages/x-tree-view/package.json
@@ -71,8 +71,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.23",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/material": "^5.16.13",
+    "@mui/system": "^5.16.13",
     "@types/prop-types": "^15.7.14",
     "@types/use-sync-external-store": "^0.0.6",
     "rimraf": "^6.0.1"
diff --git a/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewProvider.types.ts b/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewProvider.types.ts
index 14a8d0df6b9b4..8b88c1223f037 100644
--- a/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewProvider.types.ts
+++ b/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewProvider.types.ts
@@ -24,7 +24,7 @@ export type TreeViewContextValue<
     instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
     publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
     store: TreeViewStore<TSignatures>;
-    rootRef: React.RefObject<HTMLUListElement>;
+    rootRef: React.RefObject<HTMLUListElement | null>;
     wrapItem: TreeItemWrapper<TSignatures>;
     wrapRoot: TreeRootWrapper;
     runItemPlugins: TreeViewItemPluginsRunner;
diff --git a/packages/x-tree-view/src/internals/hooks/useInstanceEventHandler.ts b/packages/x-tree-view/src/internals/hooks/useInstanceEventHandler.ts
index 796b68309b7ff..519ea9e11402c 100644
--- a/packages/x-tree-view/src/internals/hooks/useInstanceEventHandler.ts
+++ b/packages/x-tree-view/src/internals/hooks/useInstanceEventHandler.ts
@@ -41,7 +41,7 @@ export function createUseInstanceEventHandler(registryContainer: RegistryContain
     const subscription = React.useRef<(() => void) | null>(null);
     const handlerRef = React.useRef<
       TreeViewEventListener<TreeViewUsedEvents<Signature>[E]> | undefined
-    >();
+    >(undefined);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef<UnregisterToken | null>(null);
 
diff --git a/packages/x-tree-view/src/internals/models/plugin.ts b/packages/x-tree-view/src/internals/models/plugin.ts
index 6b8bd4d8dd63e..8265fa9bc8706 100644
--- a/packages/x-tree-view/src/internals/models/plugin.ts
+++ b/packages/x-tree-view/src/internals/models/plugin.ts
@@ -16,7 +16,7 @@ export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSigna
   experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
   models: TreeViewUsedModels<TSignature>;
   store: TreeViewUsedStore<TSignature>;
-  rootRef: React.RefObject<HTMLUListElement>;
+  rootRef: React.RefObject<HTMLUListElement | null>;
   plugins: TreeViewPlugin<TreeViewAnyPluginSignature>[];
 }
 
diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts
index 5b986e2da2662..682b9dcfea041 100644
--- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts
+++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts
@@ -68,7 +68,7 @@ export const useTreeView = <
   const instanceRef = React.useRef({} as TreeViewInstance<TSignatures>);
   const instance = instanceRef.current as TreeViewInstance<TSignatures>;
   const publicAPI = useTreeViewApiInitialization<TreeViewPublicAPI<TSignatures>>(apiRef);
-  const innerRootRef: React.RefObject<HTMLUListElement> = React.useRef(null);
+  const innerRootRef = React.useRef<HTMLUListElement>(null);
   const handleRootRef = useForkRef(innerRootRef, rootRef);
 
   const storeRef = React.useRef<TreeViewStore<TSignaturesWithCorePluginSignatures> | null>(null);
diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeViewBuildContext.ts b/packages/x-tree-view/src/internals/useTreeView/useTreeViewBuildContext.ts
index d8c75ccbe3f5d..46ea04e5da547 100644
--- a/packages/x-tree-view/src/internals/useTreeView/useTreeViewBuildContext.ts
+++ b/packages/x-tree-view/src/internals/useTreeView/useTreeViewBuildContext.ts
@@ -24,7 +24,7 @@ export const useTreeViewBuildContext = <TSignatures extends readonly TreeViewAny
   instance: TreeViewInstance<TSignatures>;
   publicAPI: TreeViewPublicAPI<TSignatures>;
   store: TreeViewStore<TSignatures>;
-  rootRef: React.RefObject<HTMLUListElement>;
+  rootRef: React.RefObject<HTMLUListElement | null>;
 }): TreeViewContextValue<TSignatures> => {
   const runItemPlugins = React.useCallback<TreeViewItemPluginsRunner>(
     (itemPluginProps) => {
diff --git a/packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts b/packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts
index fc4462713ffc1..5d7f959fbc0df 100644
--- a/packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts
+++ b/packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts
@@ -96,7 +96,7 @@ export type UseTreeItemLabelInputSlotProps<ExternalProps = {}> = ExternalProps &
   UseTreeItemLabelInputSlotOwnProps;
 
 export interface UseTreeItemCheckboxSlotOwnProps {
-  ref: React.RefObject<HTMLButtonElement>;
+  ref: React.RefObject<HTMLButtonElement | null>;
 }
 
 export type UseTreeItemCheckboxSlotProps<ExternalProps = {}> = ExternalProps &
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7fabf822637da..112c3624d12ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,7 +5,7 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  react-is: ^18.3.1
+  react-is: ^19.0.0
   '@types/node': ^20.17.10
 
 patchedDependencies:
@@ -79,13 +79,13 @@ importers:
         version: 11.14.0
       '@emotion/react':
         specifier: ^11.14.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.14.0
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/icons-material':
-        specifier: ^5.16.11
-        version: 5.16.11(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/internal-babel-plugin-resolve-imports':
         specifier: 1.0.19
         version: 1.0.19(@babel/core@7.26.0)
@@ -94,16 +94,16 @@ importers:
         version: 1.0.22
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/monorepo':
-        specifier: github:mui/material-ui#0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60
-        version: https://codeload.github.com/mui/material-ui/tar.gz/0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60(encoding@0.1.13)
+        specifier: github:mui/material-ui#356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c
+        version: https://codeload.github.com/mui/material-ui/tar.gz/356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c(encoding@0.1.13)
       '@mui/utils':
-        specifier: ^5.16.8
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@next/eslint-plugin-next':
         specifier: 15.1.3
         version: 15.1.3
@@ -144,11 +144,11 @@ importers:
         specifier: ^20.17.10
         version: 20.17.10
       '@types/react':
-        specifier: ^18.3.18
-        version: 18.3.18
+        specifier: ^19.0.2
+        version: 19.0.2
       '@types/react-dom':
-        specifier: ^18.3.5
-        version: 18.3.5(@types/react@18.3.18)
+        specifier: ^19.0.2
+        version: 19.0.2(@types/react@19.0.2)
       '@types/requestidlecallback':
         specifier: ^0.3.7
         version: 0.3.7
@@ -348,11 +348,11 @@ importers:
         specifier: ^0.11.10
         version: 0.11.10
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
       remark:
         specifier: ^15.0.1
         version: 15.0.1
@@ -412,46 +412,46 @@ importers:
         version: 7.26.0
       '@docsearch/react':
         specifier: ^3.8.2
-        version: 3.8.2(@algolia/client-search@5.15.0)(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
+        version: 3.8.2(@algolia/client-search@5.15.0)(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(search-insights@2.17.3)
       '@emotion/cache':
         specifier: ^11.14.0
         version: 11.14.0
       '@emotion/react':
         specifier: ^11.14.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/server':
         specifier: ^11.11.0
         version: 11.11.0
       '@emotion/styled':
         specifier: ^11.14.0
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/docs':
         specifier: 6.2.1
-        version: 6.2.1(ia5pzftabq3ouijxq2ggsgafqa)
+        version: 6.2.1(lgbgefonakowvfycpysj2kfy5i)
       '@mui/icons-material':
-        specifier: ^5.16.11
-        version: 5.16.11(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/joy':
-        specifier: ^5.0.0-beta.48
-        version: 5.0.0-beta.48(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.0.0-beta.51
+        version: 5.0.0-beta.51(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/lab':
-        specifier: ^5.0.0-alpha.173
-        version: 5.0.0-alpha.174(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.0.0-alpha.175
+        version: 5.0.0-alpha.175(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material-nextjs':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(next@15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(next@15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
       '@mui/styles':
-        specifier: ^5.16.11
-        version: 5.16.11(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
-        specifier: ^5.16.8
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-charts':
         specifier: workspace:*
         version: link:../packages/x-charts/build
@@ -481,7 +481,7 @@ importers:
         version: link:../packages/x-tree-view/build
       '@react-spring/web':
         specifier: ^9.7.5
-        version: 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 9.7.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@tanstack/query-core':
         specifier: ^5.62.8
         version: 5.62.8
@@ -559,7 +559,7 @@ importers:
         version: 1.5.0
       markdown-to-jsx:
         specifier: ^7.7.2
-        version: 7.7.2(react@18.3.1)
+        version: 7.7.2(react@19.0.0)
       moment:
         specifier: ^2.30.1
         version: 2.30.1
@@ -574,7 +574,7 @@ importers:
         version: 0.5.46
       next:
         specifier: ^15.1.2
-        version: 15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
@@ -588,38 +588,38 @@ importers:
         specifier: ^15.8.1
         version: 15.8.1
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       react-docgen:
         specifier: ^5.4.3
         version: 5.4.3
       react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.54.2(react@18.3.1)
+        version: 7.54.2(react@19.0.0)
       react-is:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       react-router:
         specifier: ^6.28.1
-        version: 6.28.1(react@18.3.1)
+        version: 6.28.1(react@19.0.0)
       react-router-dom:
         specifier: ^6.28.1
-        version: 6.28.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.28.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-runner:
         specifier: ^1.0.5
-        version: 1.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-simple-code-editor:
         specifier: ^0.14.1
-        version: 0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.14.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       recast:
         specifier: ^0.23.9
         version: 0.23.9
       rifm:
         specifier: 0.12.1
-        version: 0.12.1(react@18.3.1)
+        version: 0.12.1(react@19.0.0)
       rimraf:
         specifier: ^6.0.1
         version: 6.0.1
@@ -628,7 +628,7 @@ importers:
         version: 7.8.1
       styled-components:
         specifier: ^6.1.13
-        version: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.1.13(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       stylis:
         specifier: ^4.3.4
         version: 4.3.4
@@ -682,8 +682,8 @@ importers:
         specifier: ^15.7.14
         version: 15.7.14
       '@types/react-dom':
-        specifier: ^18.3.5
-        version: 18.3.5(@types/react@18.3.18)
+        specifier: ^19.0.2
+        version: 19.0.2(@types/react@19.0.2)
       '@types/react-router-dom':
         specifier: ^5.3.3
         version: 5.3.3
@@ -735,13 +735,13 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-charts-vendor':
         specifier: workspace:*
         version: link:../x-charts-vendor
@@ -753,7 +753,7 @@ importers:
         version: 9.7.5
       '@react-spring/web':
         specifier: ^9.7.5
-        version: 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 9.7.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -762,41 +762,41 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
       react-is:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       reselect:
         specifier: ^5.1.1
         version: 5.1.1
       use-sync-external-store:
         specifier: ^1.4.0
-        version: 1.4.0(react@18.3.1)
+        version: 1.4.0(react@19.0.0)
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@react-spring/core':
         specifier: ^9.7.5
-        version: 9.7.5(react@18.3.1)
+        version: 9.7.5(react@19.0.0)
       '@react-spring/shared':
         specifier: ^9.7.5
-        version: 9.7.5(react@18.3.1)
+        version: 9.7.5(react@19.0.0)
       '@types/prop-types':
         specifier: ^15.7.14
         version: 15.7.14
       '@types/react-is':
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       '@types/use-sync-external-store':
         specifier: ^0.0.6
         version: 0.0.6
@@ -815,13 +815,13 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-charts':
         specifier: workspace:*
         version: link:../x-charts/build
@@ -839,7 +839,7 @@ importers:
         version: 9.7.5
       '@react-spring/web':
         specifier: ^9.7.5
-        version: 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 9.7.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -848,23 +848,23 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
     devDependencies:
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@react-spring/core':
         specifier: ^9.7.5
-        version: 9.7.5(react@18.3.1)
+        version: 9.7.5(react@19.0.0)
       '@react-spring/shared':
         specifier: ^9.7.5
-        version: 9.7.5(react@18.3.1)
+        version: 9.7.5(react@19.0.0)
       '@types/prop-types':
         specifier: ^15.7.14
         version: 15.7.14
@@ -1003,13 +1003,13 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-internals':
         specifier: workspace:*
         version: link:../x-internals/build
@@ -1021,26 +1021,26 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
       reselect:
         specifier: ^5.1.1
         version: 5.1.1
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/types':
-        specifier: ^7.2.15
-        version: 7.2.19(@types/react@18.3.18)
+        specifier: ^7.2.20
+        version: 7.2.20(@types/react@19.0.2)
       '@types/prop-types':
         specifier: ^15.7.14
         version: 15.7.14
@@ -1056,10 +1056,10 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-data-grid-premium':
         specifier: workspace:*
         version: link:../x-data-grid-premium/build
@@ -1074,14 +1074,14 @@ importers:
         version: 11.0.2
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
     devDependencies:
       '@mui/icons-material':
-        specifier: ^5.16.11
-        version: 5.16.11(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@types/chance':
         specifier: ^1.1.6
         version: 1.1.6
@@ -1097,13 +1097,13 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-data-grid':
         specifier: workspace:*
         version: link:../x-data-grid/build
@@ -1130,23 +1130,23 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
       reselect:
         specifier: ^5.1.1
         version: 5.1.1
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@types/prop-types':
         specifier: ^15.7.14
         version: 15.7.14
@@ -1165,13 +1165,13 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-data-grid':
         specifier: workspace:*
         version: link:../x-data-grid/build
@@ -1192,23 +1192,23 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
       reselect:
         specifier: ^5.1.1
         version: 5.1.1
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@types/prop-types':
         specifier: ^15.7.14
         version: 15.7.14
@@ -1224,19 +1224,19 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-internals':
         specifier: workspace:*
         version: link:../x-internals/build
       '@types/react-transition-group':
         specifier: ^4.4.12
-        version: 4.4.12(@types/react@18.3.18)
+        version: 4.4.12(@types/react@19.0.2)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1245,23 +1245,23 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
       react-transition-group:
         specifier: ^4.4.5
-        version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@types/luxon':
         specifier: ^3.4.2
         version: 3.4.2
@@ -1310,13 +1310,13 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-date-pickers':
         specifier: workspace:*
         version: link:../x-date-pickers/build
@@ -1340,23 +1340,23 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
       react-transition-group:
         specifier: ^4.4.5
-        version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@types/luxon':
         specifier: ^3.4.2
         version: 3.4.2
@@ -1390,14 +1390,14 @@ importers:
         version: 7.26.0
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       rimraf:
         specifier: ^6.0.1
         version: 6.0.1
@@ -1410,14 +1410,14 @@ importers:
         version: 7.26.0
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       rimraf:
         specifier: ^6.0.1
         version: 6.0.1
@@ -1430,19 +1430,19 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-internals':
         specifier: workspace:*
         version: link:../x-internals/build
       '@types/react-transition-group':
         specifier: ^4.4.12
-        version: 4.4.12(@types/react@18.3.18)
+        version: 4.4.12(@types/react@19.0.2)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1451,29 +1451,29 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
       react-transition-group:
         specifier: ^4.4.5
-        version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       reselect:
         specifier: ^5.1.1
         version: 5.1.1
       use-sync-external-store:
         specifier: ^1.4.0
-        version: 1.4.0(react@18.3.1)
+        version: 1.4.0(react@19.0.0)
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@types/prop-types':
         specifier: ^15.7.14
         version: 15.7.14
@@ -1492,13 +1492,13 @@ importers:
         version: 7.26.0
       '@emotion/react':
         specifier: ^11.9.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.8.1
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/utils':
         specifier: ^5.16.6 || ^6.0.0
-        version: 5.16.8(@types/react@18.3.18)(react@18.3.1)
+        version: 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-internals':
         specifier: workspace:*
         version: link:../x-internals/build
@@ -1510,7 +1510,7 @@ importers:
         version: link:../x-tree-view/build
       '@types/react-transition-group':
         specifier: ^4.4.12
-        version: 4.4.12(@types/react@18.3.18)
+        version: 4.4.12(@types/react@19.0.2)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1519,29 +1519,29 @@ importers:
         version: 15.8.1
       react:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1
+        version: 19.0.0
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0
-        version: 18.3.1(react@18.3.1)
+        version: 19.0.0(react@19.0.0)
       react-transition-group:
         specifier: ^4.4.5
-        version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       reselect:
         specifier: ^5.1.1
         version: 5.1.1
       use-sync-external-store:
         specifier: ^1.4.0
-        version: 1.4.0(react@18.3.1)
+        version: 1.4.0(react@19.0.0)
     devDependencies:
       '@mui/internal-test-utils':
         specifier: ^1.0.23
-        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/system':
-        specifier: ^5.16.8
-        version: 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@types/prop-types':
         specifier: ^15.7.14
         version: 15.7.14
@@ -1563,10 +1563,10 @@ importers:
         version: 11.14.0
       '@emotion/react':
         specifier: ^11.14.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@mui/material':
-        specifier: ^5.16.11
-        version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.16.13
+        version: 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/x-charts':
         specifier: workspace:*
         version: link:../packages/x-charts/build
@@ -1596,7 +1596,7 @@ importers:
         version: 1.49.1
       '@react-spring/web':
         specifier: ^9.7.5
-        version: 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 9.7.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@types/chai':
         specifier: ^4.3.20
         version: 4.3.20
@@ -1610,8 +1610,8 @@ importers:
         specifier: ^15.7.14
         version: 15.7.14
       '@types/react':
-        specifier: ^18.3.18
-        version: 18.3.18
+        specifier: ^19.0.2
+        version: 19.0.2
       '@types/semver':
         specifier: ^7.5.8
         version: 7.5.8
@@ -1631,14 +1631,14 @@ importers:
         specifier: ^15.8.1
         version: 15.8.1
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
       react-router-dom:
         specifier: ^6.28.1
-        version: 6.28.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.28.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       semver:
         specifier: ^7.6.3
         version: 7.6.3
@@ -1656,7 +1656,7 @@ importers:
         version: 4.0.0(vite@5.4.11(@types/node@20.17.10)(terser@5.36.0))(vitest@2.1.8)
       '@emotion/react':
         specifier: ^11.14.0
-        version: 11.14.0(@types/react@18.3.18)(react@18.3.1)
+        version: 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@mui/x-charts':
         specifier: workspace:*
         version: link:../../packages/x-charts/build
@@ -1668,7 +1668,7 @@ importers:
         version: 6.6.3
       '@testing-library/react':
         specifier: ^16.1.0
-        version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -1688,11 +1688,11 @@ importers:
         specifier: ^25.0.1
         version: 25.0.1
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
       vitest:
         specifier: 2.1.8
         version: 2.1.8(@types/node@20.17.10)(@vitest/browser@2.1.8)(@vitest/ui@2.1.8)(jsdom@25.0.1)(msw@2.6.6(@types/node@20.17.10)(typescript@5.7.2))(terser@5.36.0)
@@ -3091,19 +3091,19 @@ packages:
     resolution: {integrity: sha512-USvgCL/uOGFtVa6SVyRrC8kIAedzRohxIXN5LISlg5C5vLZCn7dgMFVSNhSF9cuBEFrm/O2spDWEZeMnw4ZXYg==}
     engines: {node: '>=18'}
 
-  '@mui/base@5.0.0-beta.40':
-    resolution: {integrity: sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==}
+  '@mui/base@5.0.0-beta.40-0':
+    resolution: {integrity: sha512-hG3atoDUxlvEy+0mqdMpWd04wca8HKr2IHjW/fAjlkCHQolSLazhZM46vnHjOf15M4ESu25mV/3PgjczyjVM4w==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-      react-dom: ^17.0.0 || ^18.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@mui/core-downloads-tracker@5.16.11':
-    resolution: {integrity: sha512-2eVDGg9OvIXNRmfDUQyKYH+jNcjdv1JkCH5F2YDgUye5fMX5nxGiYHAUe1BXaXyDMaLSwXC7LRksEKMiIQsFdw==}
+  '@mui/core-downloads-tracker@5.16.13':
+    resolution: {integrity: sha512-xe5RwI0Q2O709Bd2Y7l1W1NIwNmln0y+xaGk5VgX3vDJbkQEqzdfTFZ73e0CkEZgJwyiWgk5HY0l8R4nysOxjw==}
 
   '@mui/docs@6.2.1':
     resolution: {integrity: sha512-dXycT1yA9EG6YNKEcXeWAPKLYSDQROmwrwE9qHUj9JbWP8/dYTCFiqB7gYpfBf1sJ4XsL7l+IFnoqsoCEiHuuQ==}
@@ -3122,8 +3122,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/icons-material@5.16.11':
-    resolution: {integrity: sha512-LjIiDVGGPzessDd5uSGFYZNqrXqECLiJ9hESE6Xkk8CtGTN2m2h6iImKJpkoryNXYxulv87WLeqfTMWAfA4Igg==}
+  '@mui/icons-material@5.16.13':
+    resolution: {integrity: sha512-aWyOgGDEqj37m3K4F6qUfn7JrEccwiDynJtGQMFbxp94EqyGwO13TKcZ4O8aHdwW3tG63hpbION8KyUoBWI4JQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@mui/material': ^5.0.0
@@ -3153,15 +3153,15 @@ packages:
       react: ^19.0.0
       react-dom: ^19.0.0
 
-  '@mui/joy@5.0.0-beta.48':
-    resolution: {integrity: sha512-OhTvjuGl9I5IvpBr0BQyDehIW/xb2yteW6YglHJMdOb/279nItn76X1NBtPV9ImldNlBjReGwvpOXmBTTGER9w==}
+  '@mui/joy@5.0.0-beta.51':
+    resolution: {integrity: sha512-0M+aSSm291CnVLIdQP1di538zD/kekRYSzm+5hWattpGiXvUAYRQMKV4XFcs/dCsr0tkMpVT3dIdmbu6YP2r7g==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-      react-dom: ^17.0.0 || ^18.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
@@ -3170,8 +3170,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/lab@5.0.0-alpha.174':
-    resolution: {integrity: sha512-6jw+vcjfnDr/V4qzqwOPFwoqzxejGfm9F0k9E92QLmtFv5F0pH73OjmQDzALL7zrcwR4iV4D94iJZ1xFawiREA==}
+  '@mui/lab@5.0.0-alpha.175':
+    resolution: {integrity: sha512-AvM0Nvnnj7vHc9+pkkQkoE1i+dEbr6gsMdnSfy7X4w3Ljgcj1yrjZhIt3jGTCLzyKVLa6uve5eLluOcGkvMqUA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -3188,15 +3188,15 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/material-nextjs@5.16.8':
-    resolution: {integrity: sha512-UJhXaizQWrl3a5uXeCYyAHITXZnRBJJFCarccXk04gH5+NS9UArNl20mG6emyuPwV67UDh8DBNUSjpHd1pTVGg==}
+  '@mui/material-nextjs@5.16.13':
+    resolution: {integrity: sha512-sCx257xcigd9IPNqK5IMBeCCNukgcSKsmZKO2GwvGRu2sGE+TcZjzBwONIEnW3AKBGE/EqjFkyjc1maJ0TBHQw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/cache': ^11.11.0
       '@emotion/server': ^11.11.0
       '@mui/material': ^5.0.0
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      next: ^13.0.0 || ^14.0.0
+      next: ^13.0.0 || ^14.0.0 || ^15.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@emotion/cache':
@@ -3206,8 +3206,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/material@5.16.11':
-    resolution: {integrity: sha512-uoc67oecKdnVKaMHBVE433YrMuxQs22xY5nIjRb5sAPB+GaeZQWp8brQ3/adeH6k2IDa8+9i2IVd4fNLuvHSvA==}
+  '@mui/material@5.16.13':
+    resolution: {integrity: sha512-FhLDkDPYDzvrWCHFsdXzRArhS4AdYufU8d69rmLL+bwhodPcbm2C7cS8Gq5VR32PsW6aKZb58gvAgvEVaiiJbA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -3223,13 +3223,13 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60':
-    resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60}
-    version: 6.2.1
+  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c':
+    resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c}
+    version: 6.2.0
     engines: {pnpm: 9.14.4}
 
-  '@mui/private-theming@5.16.8':
-    resolution: {integrity: sha512-3Vl9yFVLU6T3CFtxRMQTcJ60Ijv7wxQi4yjH92+9YXcsqvVspeIYoocqNoIV/1bXGYfyWu5zrCmwQVHaGY7bug==}
+  '@mui/private-theming@5.16.13':
+    resolution: {integrity: sha512-+s0FklvDvO7j0yBZn19DIIT3rLfub2fWvXGtMX49rG/xHfDFcP7fbWbZKHZMMP/2/IoTRDrZCbY1iP0xZlmuJA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -3238,8 +3238,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/styled-engine@5.16.8':
-    resolution: {integrity: sha512-OFdgFf8JczSRs0kvWGdSn0ZeXxWrY0LITDPJ/nAtLEvUUTyrlFaO4il3SECX8ruzvf1VnAxHx4M/4mX9oOn9yA==}
+  '@mui/styled-engine@5.16.13':
+    resolution: {integrity: sha512-2XNHEG8/o1ucSLhTA9J+HIIXjzlnEc0OV7kneeUQ5JukErPYT2zc6KYBDLjlKWrzQyvnQzbiffjjspgHUColZg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.4.1
@@ -3251,8 +3251,8 @@ packages:
       '@emotion/styled':
         optional: true
 
-  '@mui/styles@5.16.11':
-    resolution: {integrity: sha512-sBAkVkcudptL2P0+0vktzn7KTUxW20X5si+TbgFz537xi/sewmrS+xuGV7M03veMKv1T6Vd7R3lvuChMtJLPtA==}
+  '@mui/styles@5.16.13':
+    resolution: {integrity: sha512-cz/i2npBmy3PfZ94OH7vHyToDXai3Xlo7DjerO7N2C1E/Xv6oh6cRX5EyQyj4z3IzWS4hXOBoInRiWN3iG/95Q==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -3261,8 +3261,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/system@5.16.8':
-    resolution: {integrity: sha512-L32TaFDFpGIi1g6ysRtmhc9zDgrlxDXu3NlrGE8gAsQw/ziHrPdr0PNr20O0POUshA1q14W4dNZ/z0Nx2F9lhA==}
+  '@mui/system@5.16.13':
+    resolution: {integrity: sha512-JnO3VH3yNoAmgyr44/2jiS1tcNwshwAqAaG5fTEEjHQbkuZT/mvPYj2GC1cON0zEQ5V03xrCNl/D+gU9AXibpw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -3277,16 +3277,16 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/types@7.2.19':
-    resolution: {integrity: sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==}
+  '@mui/types@7.2.20':
+    resolution: {integrity: sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@mui/utils@5.16.8':
-    resolution: {integrity: sha512-P/yb7BSWallQUeiNGxb+TM8epHteIUC8gzNTdPV2VfKhVY/EnGliHgt5np0GPkjQ7EzwDi/+gBevrAJtf+K94A==}
+  '@mui/utils@5.16.13':
+    resolution: {integrity: sha512-35kLiShnDPByk57Mz4PP66fQUodCFiOD92HfpW6dK9lc7kjhZsKHRKeYPgWuwEHeXwYsCSFtBCW4RZh/8WT+TQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -4236,13 +4236,13 @@ packages:
   '@types/range-parser@1.2.7':
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
 
-  '@types/react-dom@18.3.5':
-    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
+  '@types/react-dom@19.0.2':
+    resolution: {integrity: sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==}
     peerDependencies:
-      '@types/react': ^18.0.0
+      '@types/react': ^19.0.0
 
-  '@types/react-is@18.3.1':
-    resolution: {integrity: sha512-zts4lhQn5ia0cF/y2+3V6Riu0MAfez9/LJYavdM8TvcVl+S91A/7VWxyBT8hbRuWspmuCaiGI0F41OJYGrKhRA==}
+  '@types/react-is@19.0.0':
+    resolution: {integrity: sha512-71dSZeeJ0t3aoPyY9x6i+JNSvg5m9EF2i2OlSZI5QoJuI8Ocgor610i+4A10TQmURR+0vLwcVCEYFpXdzM1Biw==}
 
   '@types/react-router-dom@5.3.3':
     resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
@@ -4255,8 +4255,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
 
-  '@types/react@18.3.18':
-    resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
+  '@types/react@19.0.2':
+    resolution: {integrity: sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==}
 
   '@types/requestidlecallback@0.3.7':
     resolution: {integrity: sha512-5/EwNH3H/+M2zxATq9UidyD7rCq3WhK5Te/XhdhqP270QoGInVkoNBj6kK2Ah5slkZewkX8XJb7WDaYhmJu+eg==}
@@ -8902,10 +8902,10 @@ packages:
     engines: {node: '>=8.10.0'}
     hasBin: true
 
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+  react-dom@19.0.0:
+    resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==}
     peerDependencies:
-      react: ^18.3.1
+      react: ^19.0.0
 
   react-hook-form@7.54.2:
     resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
@@ -8913,8 +8913,8 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+  react-is@19.0.0:
+    resolution: {integrity: sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==}
 
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
@@ -8951,8 +8951,8 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+  react@19.0.0:
+    resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
     engines: {node: '>=0.10.0'}
 
   read-cmd-shim@4.0.0:
@@ -9225,8 +9225,8 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+  scheduler@0.25.0:
+    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
 
   schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
@@ -11483,16 +11483,16 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.15.0)(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.15.0)(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.15.0)(algoliasearch@5.15.0)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.15.0)(algoliasearch@5.15.0)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.15.0
     optionalDependencies:
-      '@types/react': 18.3.18
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@types/react': 19.0.2
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -11548,19 +11548,19 @@ snapshots:
 
   '@emotion/memoize@0.9.0': {}
 
-  '@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1)':
+  '@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@emotion/babel-plugin': 11.13.5
       '@emotion/cache': 11.14.0
       '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.0.0)
       '@emotion/utils': 1.4.2
       '@emotion/weak-memoize': 0.4.0
       hoist-non-react-statics: 3.3.2
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
     transitivePeerDependencies:
       - supports-color
 
@@ -11581,18 +11581,18 @@ snapshots:
 
   '@emotion/sheet@1.4.0': {}
 
-  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)':
+  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@emotion/babel-plugin': 11.13.5
       '@emotion/is-prop-valid': 1.3.1
-      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.0.0)
       '@emotion/utils': 1.4.2
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
     transitivePeerDependencies:
       - supports-color
 
@@ -11600,9 +11600,9 @@ snapshots:
 
   '@emotion/unitless@0.8.1': {}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)':
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.0.0)':
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   '@emotion/utils@1.4.2': {}
 
@@ -11808,11 +11808,11 @@ snapshots:
       '@floating-ui/core': 1.6.8
       '@floating-ui/utils': 0.2.8
 
-  '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@floating-ui/react-dom@2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@floating-ui/dom': 1.6.12
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
   '@floating-ui/utils@0.2.8': {}
 
@@ -12093,48 +12093,48 @@ snapshots:
       outvariant: 1.4.3
       strict-event-emitter: 0.5.1
 
-  '@mui/base@5.0.0-beta.40(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/base@5.0.0-beta.40-0(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.18)
-      '@mui/utils': 5.16.8(@types/react@18.3.18)(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@mui/types': 7.2.20(@types/react@19.0.2)
+      '@mui/utils': 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@popperjs/core': 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@mui/core-downloads-tracker@5.16.11': {}
+  '@mui/core-downloads-tracker@5.16.13': {}
 
-  '@mui/docs@6.2.1(ia5pzftabq3ouijxq2ggsgafqa)':
+  '@mui/docs@6.2.1(lgbgefonakowvfycpysj2kfy5i)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/base': 5.0.0-beta.40(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/icons-material': 5.16.11(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+      '@mui/base': 5.0.0-beta.40-0(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@mui/icons-material': 5.16.13(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       '@mui/internal-markdown': 1.0.22
-      '@mui/material': 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/system': 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+      '@mui/material': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@mui/system': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
       chai: 5.1.2
       clipboard-copy: 4.0.1
       clsx: 2.1.1
       csstype: 3.1.3
-      next: 15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       nprogress: 0.2.0
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@mui/icons-material@5.16.11(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)':
+  '@mui/icons-material@5.16.13(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/material': 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
+      '@mui/material': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
   '@mui/internal-babel-plugin-resolve-imports@1.0.19(@babel/core@7.26.0)':
     dependencies:
@@ -12168,16 +12168,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-test-utils@1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/internal-test-utils@1.0.23(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0)
       '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0)
       '@babel/register': 7.25.9(@babel/core@7.26.0)
       '@babel/runtime': 7.26.0
       '@emotion/cache': 11.14.0
-      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@19.0.2)(react@19.0.0)
       '@testing-library/dom': 10.4.0
-      '@testing-library/react': 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/react': 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
       chai: 4.5.0
       chai-dom: 1.12.0(chai@4.5.0)
@@ -12189,8 +12189,8 @@ snapshots:
       mocha: 11.0.1
       playwright: 1.49.1
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       sinon: 19.0.2
     transitivePeerDependencies:
       - '@babel/core'
@@ -12201,73 +12201,73 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@mui/joy@5.0.0-beta.48(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/joy@5.0.0-beta.51(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/base': 5.0.0-beta.40(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/core-downloads-tracker': 5.16.11
-      '@mui/system': 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.18)
-      '@mui/utils': 5.16.8(@types/react@18.3.18)(react@18.3.1)
+      '@mui/base': 5.0.0-beta.40-0(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@mui/core-downloads-tracker': 5.16.13
+      '@mui/system': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
+      '@mui/types': 7.2.20(@types/react@19.0.2)
+      '@mui/utils': 5.16.13(@types/react@19.0.2)(react@19.0.0)
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
-      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
-      '@types/react': 18.3.18
+      '@emotion/react': 11.14.0(@types/react@19.0.2)(react@19.0.0)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
+      '@types/react': 19.0.2
 
-  '@mui/lab@5.0.0-alpha.174(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/lab@5.0.0-alpha.175(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/base': 5.0.0-beta.40(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material': 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/system': 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.18)
-      '@mui/utils': 5.16.8(@types/react@18.3.18)(react@18.3.1)
+      '@mui/base': 5.0.0-beta.40-0(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@mui/material': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@mui/system': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
+      '@mui/types': 7.2.20(@types/react@19.0.2)
+      '@mui/utils': 5.16.13(@types/react@19.0.2)(react@19.0.0)
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
-      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
-      '@types/react': 18.3.18
+      '@emotion/react': 11.14.0(@types/react@19.0.2)(react@19.0.0)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
+      '@types/react': 19.0.2
 
-  '@mui/material-nextjs@5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(next@15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@mui/material-nextjs@5.16.13(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.2)(next@15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/material': 5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      next: 15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
+      '@mui/material': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      next: 15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
     optionalDependencies:
       '@emotion/cache': 11.14.0
       '@emotion/server': 11.11.0
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/material@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/core-downloads-tracker': 5.16.11
-      '@mui/system': 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.18)
-      '@mui/utils': 5.16.8(@types/react@18.3.18)(react@18.3.1)
+      '@mui/core-downloads-tracker': 5.16.13
+      '@mui/system': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
+      '@mui/types': 7.2.20(@types/react@19.0.2)
+      '@mui/utils': 5.16.13(@types/react@19.0.2)(react@19.0.0)
       '@popperjs/core': 2.11.8
-      '@types/react-transition-group': 4.4.12(@types/react@18.3.18)
+      '@types/react-transition-group': 4.4.12(@types/react@19.0.2)
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-is: 18.3.1
-      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-is: 19.0.0
+      react-transition-group: 4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
-      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
-      '@types/react': 18.3.18
+      '@emotion/react': 11.14.0(@types/react@19.0.2)(react@19.0.0)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
+      '@types/react': 19.0.2
 
-  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60(encoding@0.1.13)':
+  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c(encoding@0.1.13)':
     dependencies:
       '@googleapis/sheets': 9.3.1(encoding@0.1.13)
       '@netlify/functions': 2.8.2
@@ -12281,33 +12281,33 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@mui/private-theming@5.16.8(@types/react@18.3.18)(react@18.3.1)':
+  '@mui/private-theming@5.16.13(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/utils': 5.16.8(@types/react@18.3.18)(react@18.3.1)
+      '@mui/utils': 5.16.13(@types/react@19.0.2)(react@19.0.0)
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@mui/styled-engine@5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)':
+  '@mui/styled-engine@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@emotion/cache': 11.14.0
       csstype: 3.1.3
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
-      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@19.0.2)(react@19.0.0)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
 
-  '@mui/styles@5.16.11(@types/react@18.3.18)(react@18.3.1)':
+  '@mui/styles@5.16.13(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@emotion/hash': 0.9.2
-      '@mui/private-theming': 5.16.8(@types/react@18.3.18)(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.18)
-      '@mui/utils': 5.16.8(@types/react@18.3.18)(react@18.3.1)
+      '@mui/private-theming': 5.16.13(@types/react@19.0.2)(react@19.0.0)
+      '@mui/types': 7.2.20(@types/react@19.0.2)
+      '@mui/utils': 5.16.13(@types/react@19.0.2)(react@19.0.0)
       clsx: 2.1.1
       csstype: 3.1.3
       hoist-non-react-statics: 3.3.2
@@ -12320,41 +12320,41 @@ snapshots:
       jss-plugin-rule-value-function: 10.10.0
       jss-plugin-vendor-prefixer: 10.10.0
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@mui/system@5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)':
+  '@mui/system@5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/private-theming': 5.16.8(@types/react@18.3.18)(react@18.3.1)
-      '@mui/styled-engine': 5.16.8(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.18)
-      '@mui/utils': 5.16.8(@types/react@18.3.18)(react@18.3.1)
+      '@mui/private-theming': 5.16.13(@types/react@19.0.2)(react@19.0.0)
+      '@mui/styled-engine': 5.16.13(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(react@19.0.0)
+      '@mui/types': 7.2.20(@types/react@19.0.2)
+      '@mui/utils': 5.16.13(@types/react@19.0.2)(react@19.0.0)
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
-      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
-      '@types/react': 18.3.18
+      '@emotion/react': 11.14.0(@types/react@19.0.2)(react@19.0.0)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)
+      '@types/react': 19.0.2
 
-  '@mui/types@7.2.19(@types/react@18.3.18)':
+  '@mui/types@7.2.20(@types/react@19.0.2)':
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@mui/utils@5.16.8(@types/react@18.3.18)(react@18.3.1)':
+  '@mui/utils@5.16.13(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/types': 7.2.19(@types/react@18.3.18)
+      '@mui/types': 7.2.20(@types/react@19.0.2)
       '@types/prop-types': 15.7.14
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 18.3.1
-      react-is: 18.3.1
+      react: 19.0.0
+      react-is: 19.0.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
   '@napi-rs/wasm-runtime@0.2.4':
     dependencies:
@@ -12892,37 +12892,37 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
-  '@react-spring/animated@9.7.5(react@18.3.1)':
+  '@react-spring/animated@9.7.5(react@19.0.0)':
     dependencies:
-      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/shared': 9.7.5(react@19.0.0)
       '@react-spring/types': 9.7.5
-      react: 18.3.1
+      react: 19.0.0
 
-  '@react-spring/core@9.7.5(react@18.3.1)':
+  '@react-spring/core@9.7.5(react@19.0.0)':
     dependencies:
-      '@react-spring/animated': 9.7.5(react@18.3.1)
-      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/animated': 9.7.5(react@19.0.0)
+      '@react-spring/shared': 9.7.5(react@19.0.0)
       '@react-spring/types': 9.7.5
-      react: 18.3.1
+      react: 19.0.0
 
   '@react-spring/rafz@9.7.5': {}
 
-  '@react-spring/shared@9.7.5(react@18.3.1)':
+  '@react-spring/shared@9.7.5(react@19.0.0)':
     dependencies:
       '@react-spring/rafz': 9.7.5
       '@react-spring/types': 9.7.5
-      react: 18.3.1
+      react: 19.0.0
 
   '@react-spring/types@9.7.5': {}
 
-  '@react-spring/web@9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-spring/web@9.7.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
-      '@react-spring/animated': 9.7.5(react@18.3.1)
-      '@react-spring/core': 9.7.5(react@18.3.1)
-      '@react-spring/shared': 9.7.5(react@18.3.1)
+      '@react-spring/animated': 9.7.5(react@19.0.0)
+      '@react-spring/core': 9.7.5(react@19.0.0)
+      '@react-spring/shared': 9.7.5(react@19.0.0)
       '@react-spring/types': 9.7.5
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
   '@remix-run/router@1.21.0': {}
 
@@ -13186,15 +13186,15 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@testing-library/dom': 10.4.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
     optionalDependencies:
-      '@types/react': 18.3.18
-      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+      '@types/react': 19.0.2
+      '@types/react-dom': 19.0.2(@types/react@19.0.2)
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
@@ -13404,32 +13404,31 @@ snapshots:
 
   '@types/range-parser@1.2.7': {}
 
-  '@types/react-dom@18.3.5(@types/react@18.3.18)':
+  '@types/react-dom@19.0.2(@types/react@19.0.2)':
     dependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@types/react-is@18.3.1':
+  '@types/react-is@19.0.0':
     dependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
   '@types/react-router-dom@5.3.3':
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
       '@types/react-router': 5.1.20
 
   '@types/react-router@5.1.20':
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@types/react-transition-group@4.4.12(@types/react@18.3.18)':
+  '@types/react-transition-group@4.4.12(@types/react@19.0.2)':
     dependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.2
 
-  '@types/react@18.3.18':
+  '@types/react@19.0.2':
     dependencies:
-      '@types/prop-types': 15.7.14
       csstype: 3.1.3
 
   '@types/requestidlecallback@0.3.7': {}
@@ -16477,7 +16476,7 @@ snapshots:
 
   hoist-non-react-statics@3.3.2:
     dependencies:
-      react-is: 18.3.1
+      react-is: 19.0.0
 
   homedir-polyfill@1.0.3:
     dependencies:
@@ -17660,9 +17659,9 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
-  markdown-to-jsx@7.7.2(react@18.3.1):
+  markdown-to-jsx@7.7.2(react@19.0.0):
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   markdownlint-cli2-formatter-default@0.0.5(markdownlint-cli2@0.17.0):
     dependencies:
@@ -18176,7 +18175,7 @@ snapshots:
 
   nested-error-stacks@2.1.1: {}
 
-  next@15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@15.1.2(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@next/env': 15.1.2
       '@swc/counter': 0.1.3
@@ -18184,9 +18183,9 @@ snapshots:
       busboy: 1.6.0
       caniuse-lite: 1.0.30001686
       postcss: 8.4.31
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      styled-jsx: 5.1.6(@babel/core@7.26.0)(babel-plugin-macros@3.1.0)(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      styled-jsx: 5.1.6(@babel/core@7.26.0)(babel-plugin-macros@3.1.0)(react@19.0.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.1.2
       '@next/swc-darwin-x64': 15.1.2
@@ -18907,13 +18906,13 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
       ansi-styles: 5.2.0
-      react-is: 18.3.1
+      react-is: 19.0.0
 
   pretty-format@29.7.0:
     dependencies:
       '@jest/schemas': 29.6.3
       ansi-styles: 5.2.0
-      react-is: 18.3.1
+      react-is: 19.0.0
 
   pretty-ms@9.2.0:
     dependencies:
@@ -18968,7 +18967,7 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
-      react-is: 18.3.1
+      react-is: 19.0.0
 
   protocols@2.0.1: {}
 
@@ -19053,55 +19052,52 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-dom@18.3.1(react@18.3.1):
+  react-dom@19.0.0(react@19.0.0):
     dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
+      react: 19.0.0
+      scheduler: 0.25.0
 
-  react-hook-form@7.54.2(react@18.3.1):
+  react-hook-form@7.54.2(react@19.0.0):
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
-  react-is@18.3.1: {}
+  react-is@19.0.0: {}
 
   react-refresh@0.14.2: {}
 
-  react-router-dom@6.28.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router-dom@6.28.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@remix-run/router': 1.21.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-router: 6.28.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-router: 6.28.1(react@19.0.0)
 
-  react-router@6.28.1(react@18.3.1):
+  react-router@6.28.1(react@19.0.0):
     dependencies:
       '@remix-run/router': 1.21.0
-      react: 18.3.1
+      react: 19.0.0
 
-  react-runner@1.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-runner@1.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       sucrase: 3.35.0
 
-  react-simple-code-editor@0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-simple-code-editor@0.14.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-transition-group@4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.26.0
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
+  react@19.0.0: {}
 
   read-cmd-shim@4.0.0: {}
 
@@ -19338,9 +19334,9 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rifm@0.12.1(react@18.3.1):
+  rifm@0.12.1(react@19.0.0):
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   rimraf@2.7.1:
     dependencies:
@@ -19439,9 +19435,7 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
+  scheduler@0.25.0: {}
 
   schema-utils@3.3.0:
     dependencies:
@@ -19904,7 +19898,7 @@ snapshots:
       minimist: 1.2.8
       through: 2.3.8
 
-  styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  styled-components@6.1.13(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@emotion/is-prop-valid': 1.2.2
       '@emotion/unitless': 0.8.1
@@ -19912,16 +19906,16 @@ snapshots:
       css-to-react-native: 3.2.0
       csstype: 3.1.3
       postcss: 8.4.38
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       shallowequal: 1.1.0
       stylis: 4.3.2
       tslib: 2.6.2
 
-  styled-jsx@5.1.6(@babel/core@7.26.0)(babel-plugin-macros@3.1.0)(react@18.3.1):
+  styled-jsx@5.1.6(@babel/core@7.26.0)(babel-plugin-macros@3.1.0)(react@19.0.0):
     dependencies:
       client-only: 0.0.1
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
       '@babel/core': 7.26.0
       babel-plugin-macros: 3.1.0
@@ -20359,9 +20353,9 @@ snapshots:
 
   urlpattern-polyfill@8.0.2: {}
 
-  use-sync-external-store@1.4.0(react@18.3.1):
+  use-sync-external-store@1.4.0(react@19.0.0):
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   util-deprecate@1.0.2: {}
 
diff --git a/test/package.json b/test/package.json
index b39f09516a0b4..fe28109fdbf4e 100644
--- a/test/package.json
+++ b/test/package.json
@@ -9,7 +9,7 @@
     "@babel/runtime": "^7.26.0",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
-    "@mui/material": "^5.16.11",
+    "@mui/material": "^5.16.13",
     "@mui/x-charts": "workspace:*",
     "@mui/x-charts-pro": "workspace:*",
     "@mui/x-charts-vendor": "workspace:*",
@@ -24,15 +24,15 @@
     "@types/karma": "^6.3.9",
     "@types/moment-jalaali": "^0.7.9",
     "@types/prop-types": "^15.7.14",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.0.2",
     "@types/semver": "^7.5.8",
     "chai": "^4.5.0",
     "dayjs": "^1.11.13",
     "moment": "^2.30.1",
     "moment-jalaali": "^0.10.4",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^6.28.1",
     "semver": "^7.6.3",
     "stylis": "^4.3.4",
diff --git a/test/performance-charts/package.json b/test/performance-charts/package.json
index 9644379a94487..5f4904da4ea56 100644
--- a/test/performance-charts/package.json
+++ b/test/performance-charts/package.json
@@ -19,8 +19,8 @@
     "@vitest/browser": "2.1.8",
     "@vitest/ui": "2.1.8",
     "jsdom": "^25.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "vitest": "2.1.8"
   }
 }
diff --git a/test/tsconfig.json b/test/tsconfig.json
index 49092d4a09070..28bcc756d16e2 100644
--- a/test/tsconfig.json
+++ b/test/tsconfig.json
@@ -9,7 +9,8 @@
       "dayjs/plugin/utc.d.ts",
       "mocha",
       "moment-timezone"
-    ]
+    ],
+    "skipLibCheck": true
   },
   "include": ["e2e/**/*", "e2e-website/**/*", "regressions/**/*"],
   "exclude": ["regressions/build/**/*", "regressions/screenshots/**/*"]
diff --git a/test/utils/describeConformance.ts b/test/utils/describeConformance.ts
index 85129ca7a1714..676226a48cd66 100644
--- a/test/utils/describeConformance.ts
+++ b/test/utils/describeConformance.ts
@@ -5,7 +5,7 @@ import {
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 export function describeConformance(
-  minimalElement: React.ReactElement,
+  minimalElement: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
   function getOptionsWithDefaults() {
diff --git a/test/utils/describeSlotsConformance.tsx b/test/utils/describeSlotsConformance.tsx
index 0d638bfa8fb08..b596722026360 100644
--- a/test/utils/describeSlotsConformance.tsx
+++ b/test/utils/describeSlotsConformance.tsx
@@ -5,7 +5,7 @@ import { MuiRenderResult } from '@mui/internal-test-utils/createRenderer';
 
 interface DescribeSlotsConformanceParams {
   getElement: (params: { slotName: string; props: any }) => React.ReactElement<any>;
-  render: (node: React.ReactElement) => MuiRenderResult;
+  render: (node: React.ReactElement<any>) => MuiRenderResult;
   slots: { [slotName: string]: { className: string } };
 }
 
diff --git a/test/utils/helperFn.ts b/test/utils/helperFn.ts
index 068d37943e5d3..7d56f6d752be4 100644
--- a/test/utils/helperFn.ts
+++ b/test/utils/helperFn.ts
@@ -140,9 +140,7 @@ export function getColumnHeaderCell(colIndex: number, rowIndex?: number): HTMLEl
 }
 
 export function getColumnHeadersTextContent() {
-  return Array.from(document.querySelectorAll('[role="columnheader"]')).map(
-    (node) => node!.textContent,
-  );
+  return screen.queryAllByRole('columnheader').map((node) => node!.textContent);
 }
 
 export function getRowsFieldContent(field: string) {
diff --git a/test/utils/pickers/createPickerRenderer.tsx b/test/utils/pickers/createPickerRenderer.tsx
index 25da543cf517d..9a353651b344e 100644
--- a/test/utils/pickers/createPickerRenderer.tsx
+++ b/test/utils/pickers/createPickerRenderer.tsx
@@ -46,7 +46,7 @@ export function createPickerRenderer({
 
   return {
     clock,
-    render(node: React.ReactElement, options?: Omit<RenderOptions, 'wrapper'>) {
+    render(node: React.ReactElement<any>, options?: Omit<RenderOptions, 'wrapper'>) {
       return clientRender(node, { ...options, wrapper: Wrapper });
     },
     adapter,
diff --git a/test/utils/pickers/describePicker/describePicker.types.ts b/test/utils/pickers/describePicker/describePicker.types.ts
index 342ec13c02cc8..08ac8e3247634 100644
--- a/test/utils/pickers/describePicker/describePicker.types.ts
+++ b/test/utils/pickers/describePicker/describePicker.types.ts
@@ -5,5 +5,5 @@ export interface DescribePickerOptions {
   fieldType: 'single-input' | 'multi-input';
   variant: 'mobile' | 'desktop' | 'static';
   hasNoView?: boolean;
-  render: (node: React.ReactElement) => MuiRenderResult;
+  render: (node: React.ReactElement<any>) => MuiRenderResult;
 }
diff --git a/test/utils/pickers/describeValidation/describeValidation.types.ts b/test/utils/pickers/describeValidation/describeValidation.types.ts
index 66d1f7720def2..68f894ae312bc 100644
--- a/test/utils/pickers/describeValidation/describeValidation.types.ts
+++ b/test/utils/pickers/describeValidation/describeValidation.types.ts
@@ -4,7 +4,7 @@ import { DateOrTimeView } from '@mui/x-date-pickers/models';
 import { PickerComponentFamily } from '../describe.types';
 
 export interface DescribeValidationInputOptions {
-  render: (node: React.ReactElement) => MuiRenderResult;
+  render: (node: React.ReactElement<any>) => MuiRenderResult;
   // TODO: Export `Clock` from monorepo
   clock: ReturnType<typeof createRenderer>['clock'];
   after?: () => void;
diff --git a/test/utils/pickers/describeValue/describeValue.types.ts b/test/utils/pickers/describeValue/describeValue.types.ts
index c1cb3b358d3fe..c823c418143a2 100644
--- a/test/utils/pickers/describeValue/describeValue.types.ts
+++ b/test/utils/pickers/describeValue/describeValue.types.ts
@@ -14,7 +14,7 @@ interface DescribeValueBaseOptions<
   C extends PickerComponentFamily,
 > {
   componentFamily: C;
-  render: (node: React.ReactElement) => MuiRenderResult;
+  render: (node: React.ReactElement<any>) => MuiRenderResult;
   assertRenderedValue: (expectedValue: TValue) => void;
   values: [InferNonNullablePickerValue<TValue>, InferNonNullablePickerValue<TValue>];
   emptyValue: TValue;
diff --git a/test/utils/pickers/fields.tsx b/test/utils/pickers/fields.tsx
index 052d39f1e032a..6740c7354596e 100644
--- a/test/utils/pickers/fields.tsx
+++ b/test/utils/pickers/fields.tsx
@@ -89,7 +89,7 @@ export const buildFieldInteractions = <P extends {}>({
     props,
     { hook, componentFamily = 'field', direction = 'ltr' } = {},
   ) => {
-    let fieldRef: React.RefObject<FieldRef<PickerValue>> = { current: null };
+    let fieldRef: React.RefObject<FieldRef<PickerValue> | null> = { current: null };
 
     function WrappedComponent(propsFromRender: any) {
       fieldRef = React.useRef<FieldRef<PickerValue>>(null);
diff --git a/test/utils/tree-view/describeTreeView/describeTreeView.types.ts b/test/utils/tree-view/describeTreeView/describeTreeView.types.ts
index a51c1ec53c762..951e7226c29a4 100644
--- a/test/utils/tree-view/describeTreeView/describeTreeView.types.ts
+++ b/test/utils/tree-view/describeTreeView/describeTreeView.types.ts
@@ -141,7 +141,7 @@ export type DescribeTreeViewRenderer<TSignatures extends TreeViewAnyPluginSignat
 ) => DescribeTreeViewRendererReturnValue<TSignatures>;
 
 export type DescribeTreeViewJSXRenderer = (
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
 ) => DescribeTreeViewRendererUtils;
 
 type TreeViewComponentName = 'RichTreeView' | 'RichTreeViewPro' | 'SimpleTreeView';