diff --git a/packages/grid/_modules_/grid/components/GridAutoSizer.tsx b/packages/grid/_modules_/grid/components/GridAutoSizer.tsx
index 29fdb63cfe14..690eac36fce6 100644
--- a/packages/grid/_modules_/grid/components/GridAutoSizer.tsx
+++ b/packages/grid/_modules_/grid/components/GridAutoSizer.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useForkRef, ownerWindow } from '@mui/material/utils';
-import { useEventCallback, useEnhancedEffect } from '../utils/material-ui-utils';
+import {
+  useForkRef,
+  ownerWindow,
+  useEventCallback,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+} from '@mui/material/utils';
 import createDetectElementResize from '../lib/createDetectElementResize';
 // TODO replace with https://caniuse.com/resizeobserver.
 
diff --git a/packages/grid/_modules_/grid/components/GridRow.tsx b/packages/grid/_modules_/grid/components/GridRow.tsx
index 86625af02511..f953948879ea 100644
--- a/packages/grid/_modules_/grid/components/GridRow.tsx
+++ b/packages/grid/_modules_/grid/components/GridRow.tsx
@@ -3,11 +3,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { GridEvents } from '../constants/eventsConstants';
 import { GridRowId, GridRowData } from '../models/gridRows';
 import { GridEditModes, GridRowModes, GridEditRowsModel } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { composeClasses } from '../utils/material-ui-utils';
 import { getDataGridUtilityClass, gridClasses } from '../gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../GridComponentProps';
diff --git a/packages/grid/_modules_/grid/components/GridRowCount.tsx b/packages/grid/_modules_/grid/components/GridRowCount.tsx
index 75a8cb47b557..ad617c72247f 100644
--- a/packages/grid/_modules_/grid/components/GridRowCount.tsx
+++ b/packages/grid/_modules_/grid/components/GridRowCount.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../GridComponentProps';
-import { composeClasses } from '../utils/material-ui-utils';
 
 interface RowCountProps {
   rowCount: number;
diff --git a/packages/grid/_modules_/grid/components/GridScrollArea.tsx b/packages/grid/_modules_/grid/components/GridScrollArea.tsx
index de3026474c80..c14e3b425442 100644
--- a/packages/grid/_modules_/grid/components/GridScrollArea.tsx
+++ b/packages/grid/_modules_/grid/components/GridScrollArea.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { GridEvents } from '../constants/eventsConstants';
 import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
 import { GridScrollParams } from '../models/params/gridScrollParams';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../gridClasses';
-import { composeClasses } from '../utils/material-ui-utils';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../GridComponentProps';
 import { gridDensityHeaderHeightSelector } from '../hooks/features/density/densitySelector';
diff --git a/packages/grid/_modules_/grid/components/GridSelectedRowCount.tsx b/packages/grid/_modules_/grid/components/GridSelectedRowCount.tsx
index 7801e471f673..85b48650c02f 100644
--- a/packages/grid/_modules_/grid/components/GridSelectedRowCount.tsx
+++ b/packages/grid/_modules_/grid/components/GridSelectedRowCount.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../GridComponentProps';
-import { composeClasses } from '../utils/material-ui-utils';
 
 interface SelectedRowCountProps {
   selectedRowCount: number;
diff --git a/packages/grid/_modules_/grid/components/GridVirtualScroller.tsx b/packages/grid/_modules_/grid/components/GridVirtualScroller.tsx
index afb4cd69a5e9..056ddf29a024 100644
--- a/packages/grid/_modules_/grid/components/GridVirtualScroller.tsx
+++ b/packages/grid/_modules_/grid/components/GridVirtualScroller.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { useForkRef } from '@mui/material/utils';
 import { styled } from '@mui/material/styles';
-import { composeClasses } from '../utils/material-ui-utils';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
diff --git a/packages/grid/_modules_/grid/components/cell/GridBooleanCell.tsx b/packages/grid/_modules_/grid/components/cell/GridBooleanCell.tsx
index 0383eaaa8722..1465857bdfd6 100644
--- a/packages/grid/_modules_/grid/components/cell/GridBooleanCell.tsx
+++ b/packages/grid/_modules_/grid/components/cell/GridBooleanCell.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { SvgIconProps } from '@mui/material/SvgIcon';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 
 type OwnerState = { classes: GridComponentProps['classes'] };
 
diff --git a/packages/grid/_modules_/grid/components/cell/GridCell.tsx b/packages/grid/_modules_/grid/components/cell/GridCell.tsx
index 7a5d3c0f4047..f9500f2ab65f 100644
--- a/packages/grid/_modules_/grid/components/cell/GridCell.tsx
+++ b/packages/grid/_modules_/grid/components/cell/GridCell.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ownerDocument, capitalize } from '@mui/material/utils';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { ownerDocument, capitalize } from '@mui/material/utils';
 import { GridEvents } from '../../constants/eventsConstants';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import {
@@ -13,7 +14,6 @@ import {
   GridRowId,
 } from '../../models/index';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
 
diff --git a/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx b/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx
index 87f896553521..7e32fa7468b8 100644
--- a/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx
+++ b/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import {
+  unstable_useId as useId,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+} from '@mui/material/utils';
 import Checkbox from '@mui/material/Checkbox';
-import { unstable_useId as useId } from '@mui/material/utils';
-import { composeClasses, useEnhancedEffect } from '../../utils/material-ui-utils';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
diff --git a/packages/grid/_modules_/grid/components/cell/GridEditDateCell.tsx b/packages/grid/_modules_/grid/components/cell/GridEditDateCell.tsx
index 1bcc641e230a..06216978dbae 100644
--- a/packages/grid/_modules_/grid/components/cell/GridEditDateCell.tsx
+++ b/packages/grid/_modules_/grid/components/cell/GridEditDateCell.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
-import { composeClasses, useEnhancedEffect } from '../../utils/material-ui-utils';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
diff --git a/packages/grid/_modules_/grid/components/cell/GridEditInputCell.tsx b/packages/grid/_modules_/grid/components/cell/GridEditInputCell.tsx
index a6849dbbad41..da047cf211ea 100644
--- a/packages/grid/_modules_/grid/components/cell/GridEditInputCell.tsx
+++ b/packages/grid/_modules_/grid/components/cell/GridEditInputCell.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
-import { composeClasses, useEnhancedEffect } from '../../utils/material-ui-utils';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
diff --git a/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx
index 7965db8628fc..d5e6fcddffbc 100644
--- a/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx
+++ b/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import Select, { SelectProps } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import {
@@ -7,7 +8,6 @@ import {
   GridValueFormatterParams,
 } from '../../models/params/gridCellParams';
 import { isEscapeKey } from '../../utils/keyboardUtils';
-import { useEnhancedEffect } from '../../utils/material-ui-utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx b/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx
index ceb7cc0e2de6..5f2f0c202ee0 100644
--- a/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx
+++ b/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
 import Tooltip from '@mui/material/Tooltip';
@@ -7,7 +8,6 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 
 export interface ColumnHeaderFilterIconProps {
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderMenuIcon.tsx b/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderMenuIcon.tsx
index 42a2c670fb80..8ec660e162db 100644
--- a/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderMenuIcon.tsx
+++ b/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderMenuIcon.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridStateColDef } from '../../models/colDef/gridColDef';
 import { getDataGridUtilityClass } from '../../gridClasses';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
 
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx
index 1d3620734bf4..0a12c0c5824c 100644
--- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx
+++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId } from '@mui/material/utils';
 import { GridEvents } from '../../constants/eventsConstants';
 import { GridStateColDef } from '../../models/colDef/index';
@@ -13,7 +14,6 @@ import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { ColumnHeaderFilterIcon } from './ColumnHeaderFilterIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../gridClasses';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
 
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSeparator.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSeparator.tsx
index 46f7e618e097..39d63f3d56fe 100644
--- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSeparator.tsx
+++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSeparator.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 
 export interface GridColumnHeaderSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSortIcon.tsx
index f04d70af25fc..07ff4d25c023 100644
--- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSortIcon.tsx
+++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSortIcon.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import Badge from '@mui/material/Badge';
 import IconButton from '@mui/material/IconButton';
 import { GridIconSlotsComponent } from '../../models/gridIconSlotsComponent';
@@ -7,7 +8,6 @@ import { GridSortDirection } from '../../models/gridSortModel';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 
 export interface GridColumnHeaderSortIconProps {
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx
index b9e145e00d8e..cd42564e2650 100644
--- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx
+++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
 import { isOverflown } from '../../utils/domUtils';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 
 type OwnerState = { classes: GridComponentProps['classes'] };
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx
index c07aac12cea2..01031cd53671 100644
--- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx
+++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useForkRef } from '@mui/material/utils';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import {
   visibleGridColumnsSelector,
   gridColumnsMetaSelector,
@@ -10,7 +11,6 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { gridScrollBarSizeSelector } from '../../hooks/features/container/gridContainerSizesSelector';
 import { getDataGridUtilityClass } from '../../gridClasses';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
 import { useGridApiEventHandler } from '../../hooks/utils/useGridApiEventHandler';
diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx
index 8d9becd27b56..27016b7ed50c 100644
--- a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx
+++ b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useForkRef } from '@mui/material/utils';
 import { GridEvents } from '../../constants/eventsConstants';
 import { GridCellParams } from '../../models/params/gridCellParams';
@@ -7,7 +8,6 @@ import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../gridClasses';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 import { GridRowSelectionCheckboxParams } from '../../models/params/gridRowSelectionCheckboxParams';
 
diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx
index c5f19e8d90f1..49146cdd8ae3 100644
--- a/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx
+++ b/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { GridEvents } from '../../constants/eventsConstants';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
@@ -9,7 +10,6 @@ import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 import { GridHeaderSelectionCheckboxParams } from '../../models/params/gridHeaderSelectionCheckboxParams';
 import { visibleSortedGridRowIdsSelector } from '../../hooks/features/filter/gridFilterSelector';
diff --git a/packages/grid/_modules_/grid/components/containers/GridColumnsContainer.tsx b/packages/grid/_modules_/grid/components/containers/GridColumnsContainer.tsx
index e4218873ac7f..68d093276e5c 100644
--- a/packages/grid/_modules_/grid/components/containers/GridColumnsContainer.tsx
+++ b/packages/grid/_modules_/grid/components/containers/GridColumnsContainer.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 
 type GridColumnsContainerProps = React.HTMLAttributes<HTMLDivElement>;
diff --git a/packages/grid/_modules_/grid/components/containers/GridFooterContainer.tsx b/packages/grid/_modules_/grid/components/containers/GridFooterContainer.tsx
index 8926a943b25e..990c0f82f1a6 100644
--- a/packages/grid/_modules_/grid/components/containers/GridFooterContainer.tsx
+++ b/packages/grid/_modules_/grid/components/containers/GridFooterContainer.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 
 export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement>;
diff --git a/packages/grid/_modules_/grid/components/containers/GridMainContainer.tsx b/packages/grid/_modules_/grid/components/containers/GridMainContainer.tsx
index 6ed3aaaf1f6d..22eae3819605 100644
--- a/packages/grid/_modules_/grid/components/containers/GridMainContainer.tsx
+++ b/packages/grid/_modules_/grid/components/containers/GridMainContainer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 
 type OwnerState = { classes: GridComponentProps['classes'] };
diff --git a/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx b/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx
index 3659673c9495..68dbd249f454 100644
--- a/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx
+++ b/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
 
 export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement>;
diff --git a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx
index e77d75764951..70f0589d8d88 100644
--- a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx
+++ b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { generateUtilityClasses, InternalStandardProps as StandardProps } from '@mui/material';
 import { createTheme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
@@ -8,10 +9,6 @@ import Paper from '@mui/material/Paper';
 import Popper, { PopperProps } from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { isEscapeKey } from '../../utils/keyboardUtils';
-import {
-  InternalStandardProps as StandardProps,
-  generateUtilityClasses,
-} from '../../utils/material-ui-utils';
 
 export interface GridPanelClasses {
   /** Styles applied to the root element. */
diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx
index e2ed08452fe2..85ab9d3bace1 100644
--- a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx
+++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import {
   GridToolbarContainer,
   GridToolbarContainerProps,
@@ -11,7 +12,6 @@ import { GridToolbarExport } from './GridToolbarExport';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
 import { getDataGridUtilityClass } from '../../gridClasses';
-import { composeClasses } from '../../utils/material-ui-utils';
 
 type OwnerState = { classes: GridComponentProps['classes'] };
 
diff --git a/packages/grid/_modules_/grid/gridClasses.ts b/packages/grid/_modules_/grid/gridClasses.ts
index c5811c076f57..7bf74e10b0fd 100644
--- a/packages/grid/_modules_/grid/gridClasses.ts
+++ b/packages/grid/_modules_/grid/gridClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClasses, generateUtilityClass } from './utils/material-ui-utils';
+import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 
 export interface GridClasses {
   /**
diff --git a/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx
index 7017386957e5..95c74472cd40 100644
--- a/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { GridApiRef } from '../../../models/api/gridApiRef';
 import { GridEvents } from '../../../constants/eventsConstants';
@@ -12,7 +13,6 @@ import { useGridState } from '../../utils/useGridState';
 import { gridColumnReorderDragColSelector } from './columnReorderSelector';
 import { GridComponentProps } from '../../../GridComponentProps';
 import { useGridStateInit } from '../../utils/useGridStateInit';
-import { composeClasses } from '../../../utils/material-ui-utils';
 
 const CURSOR_MOVE_DIRECTION_LEFT = 'left';
 const CURSOR_MOVE_DIRECTION_RIGHT = 'right';
diff --git a/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx
index 4d4470516666..801a20b2213e 100644
--- a/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { ownerDocument } from '@mui/material/utils';
+import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { GridStateColDef } from '../../../models/colDef';
 import { useGridLogger } from '../../utils';
-import { useEventCallback } from '../../../utils/material-ui-utils';
 import { GridEvents } from '../../../constants/eventsConstants';
 import { gridClasses } from '../../../gridClasses';
 import {
@@ -106,7 +105,7 @@ export const useGridColumnResize = (
     });
   };
 
-  const handleResizeMouseUp = useEventCallback((nativeEvent) => {
+  const handleResizeMouseUp = useEventCallback((nativeEvent: any) => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
 
@@ -131,7 +130,7 @@ export const useGridColumnResize = (
     );
   });
 
-  const handleResizeMouseMove = useEventCallback((nativeEvent) => {
+  const handleResizeMouseMove = useEventCallback((nativeEvent: any) => {
     // Cancel move in case some other element consumed a mouseup event and it was not fired.
     if (nativeEvent.buttons === 0) {
       handleResizeMouseUp(nativeEvent);
@@ -200,7 +199,7 @@ export const useGridColumnResize = (
     },
   );
 
-  const handleTouchEnd = useEventCallback((nativeEvent) => {
+  const handleTouchEnd = useEventCallback((nativeEvent: any) => {
     const finger = trackFinger(nativeEvent, touchId.current);
 
     if (!finger) {
@@ -222,7 +221,7 @@ export const useGridColumnResize = (
     );
   });
 
-  const handleTouchMove = useEventCallback((nativeEvent) => {
+  const handleTouchMove = useEventCallback((nativeEvent: any) => {
     const finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
       return;
@@ -252,7 +251,7 @@ export const useGridColumnResize = (
     );
   });
 
-  const handleTouchStart = useEventCallback((event) => {
+  const handleTouchStart = useEventCallback((event: any) => {
     const cellSeparator = findParentElementFromClassName(
       event.target,
       gridClasses['columnSeparator--resizable'],
diff --git a/packages/grid/_modules_/grid/hooks/features/editRows/useGridEditRows.ts b/packages/grid/_modules_/grid/hooks/features/editRows/useGridEditRows.ts
index bfcf37bb7c52..cbf5e552ef26 100644
--- a/packages/grid/_modules_/grid/hooks/features/editRows/useGridEditRows.ts
+++ b/packages/grid/_modules_/grid/hooks/features/editRows/useGridEditRows.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useEventCallback } from '@mui/material/utils';
 import { GridEvents } from '../../../constants/eventsConstants';
 import { GridComponentProps } from '../../../GridComponentProps';
 import { GridApiRef } from '../../../models/api/gridApiRef';
@@ -33,7 +34,6 @@ import {
 } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { allGridColumnsSelector } from '../columns/gridColumnsSelector';
-import { useEventCallback } from '../../../utils/material-ui-utils';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridState } from '../../utils/useGridState';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -108,7 +108,7 @@ export function useGridEditRows(
     },
   );
 
-  const handleColumnHeaderDragStart = useEventCallback((nativeEvent) => {
+  const handleColumnHeaderDragStart = useEventCallback((nativeEvent: any) => {
     const { cell } = apiRef.current.state.focus;
     if (!cell) {
       return;
diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts
index 61a0b63c4408..a46d9e45e889 100644
--- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts
+++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { GridEvents } from '../../../constants/eventsConstants';
 import { GridComponentProps } from '../../../GridComponentProps';
 import { GridApiRef } from '../../../models/api/gridApiRef';
@@ -22,7 +23,6 @@ import { GridCellParams } from '../../../models/params/gridCellParams';
 import { GridRowSelectionCheckboxParams } from '../../../models/params/gridRowSelectionCheckboxParams';
 import { GridColumnsPreProcessing } from '../../core/columnsPreProcessing';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GridColDef } from '../../../models';
-import { composeClasses } from '../../../utils/material-ui-utils';
 import { getDataGridUtilityClass } from '../../../gridClasses';
 import { useGridStateInit } from '../../utils/useGridStateInit';
 import { useFirstRender } from '../../utils/useFirstRender';
diff --git a/packages/grid/_modules_/grid/utils/material-ui-utils.ts b/packages/grid/_modules_/grid/utils/material-ui-utils.ts
deleted file mode 100644
index c53317319c9e..000000000000
--- a/packages/grid/_modules_/grid/utils/material-ui-utils.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import * as React from 'react';
-import { useEventCallback as muiUseEventCallback } from '@mui/material/utils';
-import { getThemeProps } from '@mui/styles';
-import { StyledComponentProps, useTheme } from '@mui/material/styles';
-
-/**
- * TODO import from the v5 directly
- *
- * Remove properties `K` from `T`.
- * Distributive for union types.
- *
- * @internal
- */
-export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
-
-/**
- * TODO import from the core v5 directly
- *
- * @internal ONLY USE FROM WITHIN mui-org/material-ui
- *
- * Internal helper type for conform (describeConformance) components
- * However, we don't declare classes on this type.
- * It is recommended to declare them manually with an interface so that each class can have a separate JSDOC.
- */
-export type InternalStandardProps<C, Removals extends keyof C = never> = DistributiveOmit<
-  C,
-  'classes' | Removals
-> &
-  // each component declares it's classes in a separate interface for proper JSDOC
-  StyledComponentProps<never> & {
-    ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
-    // TODO: Remove implicit props. Up to each component.
-    className?: string;
-    style?: React.CSSProperties;
-  };
-
-export function useEventCallback<T extends (...args: any[]) => any>(func: T): T {
-  // @ts-expect-error TODO remove wrapper once upgraded to v5
-  return muiUseEventCallback(func);
-}
-
-// TODO replace with { useEnhancedEffect } from @mui/material/utils.
-export const useEnhancedEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-// TODO replace with { useThemeProps } from @mui/material/styles.
-export function useThemeProps({ props: inputProps, name }) {
-  const contextTheme: any = useTheme();
-
-  return React.useMemo(() => {
-    const props = { ...inputProps };
-    const more = getThemeProps({ theme: contextTheme, name, props });
-    const theme = more.theme || contextTheme;
-    const isRtl = theme.direction === 'rtl';
-
-    return {
-      theme,
-      isRtl,
-      ...more,
-    };
-  }, [inputProps, name, contextTheme]);
-}
-
-// TODO replace with { unstable_composeClasses } from '@material-ui/unstyled'
-export function composeClasses<ClassKey extends string>(
-  slots: Record<ClassKey, ReadonlyArray<string | false | undefined | null>>,
-  getUtilityClass: (slot: string) => string,
-  classes: Record<string, string> | undefined,
-): Record<ClassKey, string> {
-  const output: Record<ClassKey, string> = {} as any;
-
-  Object.keys(slots).forEach(
-    // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-    // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-    (slot: ClassKey) => {
-      output[slot] = slots[slot]
-        .reduce((acc, key) => {
-          if (key) {
-            if (classes && classes[key]) {
-              acc.push(classes[key]);
-            }
-            acc.push(getUtilityClass(key));
-          }
-          return acc;
-        }, [] as string[])
-        .join(' ');
-    },
-  );
-
-  return output;
-}
-
-// TODO replace with { generateUtilityClass } from '@material-ui/unstyled';
-const globalPseudoClassesMapping: Record<string, string> = {
-  active: 'Mui-active',
-  checked: 'Mui-checked',
-  disabled: 'Mui-disabled',
-  error: 'Mui-error',
-  focused: 'Mui-focused',
-  focusVisible: 'Mui-focusVisible',
-  required: 'Mui-required',
-  expanded: 'Mui-expanded',
-  selected: 'Mui-selected',
-};
-
-export function generateUtilityClass(componentName: string, slot: string): string {
-  const globalPseudoClass = globalPseudoClassesMapping[slot];
-  return globalPseudoClass || `${componentName}-${slot}`;
-}
-
-// TODO replace with { generateUtilityClasses } from '@material-ui/unstyled';
-export function generateUtilityClasses<T extends string>(
-  componentName: string,
-  slots: T[],
-): Record<T, string> {
-  const result: Record<string, string> = {};
-
-  slots.forEach((slot) => {
-    result[slot] = generateUtilityClass(componentName, slot);
-  });
-
-  return result;
-}
diff --git a/packages/grid/data-grid/src/useDataGridProps.ts b/packages/grid/data-grid/src/useDataGridProps.ts
index b3252c1a92ba..8c06ef857acd 100644
--- a/packages/grid/data-grid/src/useDataGridProps.ts
+++ b/packages/grid/data-grid/src/useDataGridProps.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
 import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps';
 import {
   GridComponentProps,
   GridInputComponentProps,
 } from '../../_modules_/grid/GridComponentProps';
-import { useThemeProps } from '../../_modules_/grid/utils/material-ui-utils';
 import { useGridProcessedProps } from '../../_modules_/grid/hooks/utils/useGridProcessedProps';
 
 type ForcedPropsKey = Exclude<keyof GridInputComponentProps, keyof DataGridProps> | 'pagination';
diff --git a/packages/grid/x-grid/src/useDataGridProProps.ts b/packages/grid/x-grid/src/useDataGridProProps.ts
index e7b42601f19f..14a0f993028d 100644
--- a/packages/grid/x-grid/src/useDataGridProProps.ts
+++ b/packages/grid/x-grid/src/useDataGridProProps.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
 import {
   GridComponentProps,
   GridInputComponentProps,
 } from '../../_modules_/grid/GridComponentProps';
-import { useThemeProps } from '../../_modules_/grid/utils/material-ui-utils';
 import { DataGridProProps } from './DataGridProProps';
 import { useGridProcessedProps } from '../../_modules_/grid/hooks/utils/useGridProcessedProps';