@mui/material 5.16.7 → 5.16.9

package/modern/Slide/Slide.js

@@ -9,6 +9,7 @@ import { Transition } from 'react-transition-group';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import useTheme from '../styles/useTheme';
@@ -108,7 +109,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(children.ref, childrenRef, ref);
+  const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/modern/Slider/useSlider.js

@@ -178,7 +178,7 @@ export function useSlider(parameters) {
     tabIndex,
     value: valueProp
   } = parameters;
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
   // - The active state isn't transferred when inversing a range slider.
@@ -222,7 +222,7 @@ export function useSlider(parameters) {
     ref: focusVisibleRef
   } = useIsFocusVisible();
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
-  const sliderRef = React.useRef();
+  const sliderRef = React.useRef(null);
   const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
   const handleRef = useForkRef(ref, handleFocusRef);
   const createHandleHiddenInputFocus = otherHandlers => event => {
@@ -328,7 +328,7 @@ export function useSlider(parameters) {
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
-  const previousIndex = React.useRef();
+  const previousIndex = React.useRef(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';

package/modern/Tabs/ScrollbarSize.js

@@ -51,9 +51,10 @@ export default function ScrollbarSize(props) {
     onChange(scrollbarHeight.current);
   }, [onChange]);
   return /*#__PURE__*/_jsx("div", _extends({
-    style: styles,
+    style: styles
+  }, other, {
     ref: nodeRef
-  }, other));
+  }));
 }
 process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
   onChange: PropTypes.func.isRequired

package/modern/Tooltip/Tooltip.js

@@ -12,6 +12,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import appendOwnerState from '@mui/utils/appendOwnerState';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from '../styles';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
@@ -427,7 +428,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);
+  const handleRef = useForkRef(getReactElementRef(children), focusVisibleRef, setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/modern/Unstable_TrapFocus/FocusTrap.js

@@ -3,7 +3,7 @@
 /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument } from '@mui/utils';
+import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, unstable_getReactElementRef as getReactElementRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
@@ -93,8 +93,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = useForkRef(children.ref, rootRef);
+  const handleRef = useForkRef(getReactElementRef(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/modern/Zoom/Zoom.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -50,7 +51,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.7
+ * @mui/material v5.16.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useAutocomplete/useAutocomplete.js

@@ -58,6 +58,7 @@ const defaultFilterOptions = createFilterOptions();
 // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
+const MULTIPLE_DEFAULT_VALUE = [];
 function useAutocomplete(props) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -71,7 +72,7 @@ function useAutocomplete(props) {
     clearOnBlur = !props.freeSolo,
     clearOnEscape = false,
     componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
+    defaultValue = props.multiple ? MULTIPLE_DEFAULT_VALUE : null,
     disableClearable = false,
     disableCloseOnSelect = false,
     disabled: disabledProp,

package/modern/version/index.js

@@ -1,7 +1,7 @@
-export const version = "5.16.7";
+export const version = "5.16.9";
 export const major = Number("5");
 export const minor = Number("16");
-export const patch = Number("7");
+export const patch = Number("9");
 export const preReleaseLabel = undefined || null;
 export const preReleaseNumber = Number(undefined) || null;
 export default version;

package/node/ClickAwayListener/ClickAwayListener.js

@@ -9,6 +9,7 @@ exports.ClickAwayListener = ClickAwayListener;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -54,9 +55,7 @@ function ClickAwayListener(props) {
       activatedRef.current = false;
     };
   }, []);
-  const handleRef = (0, _utils.unstable_useForkRef)(
-  // @ts-expect-error TODO upstream fix
-  children.ref, nodeRef);
+  const handleRef = (0, _utils.unstable_useForkRef)((0, _getReactElementRef.default)(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/node/Fade/Fade.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -58,7 +59,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/Grow/Grow.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _reactTransitionGroup = require("react-transition-group");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils = require("../transitions/utils");
@@ -68,7 +69,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = (0, _useTheme.default)();
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/Portal/Portal.js

@@ -36,8 +36,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = (0, _utils.unstable_useForkRef)( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
+  const handleRef = (0, _utils.unstable_useForkRef)( /*#__PURE__*/React.isValidElement(children) ? (0, _utils.unstable_getReactElementRef)(children) : null, forwardedRef);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/node/Select/Select.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
@@ -98,7 +99,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       ownerState: ownerState
     })
   }[variant];
-  const inputComponentRef = (0, _useForkRef.default)(ref, InputComponent.ref);
+  const inputComponentRef = (0, _useForkRef.default)(ref, (0, _getReactElementRef.default)(InputComponent));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, (0, _extends2.default)({
       // Most of the logic is implemented in `SelectInput`.

package/node/Slide/Slide.js

@@ -15,6 +15,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -115,7 +116,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const childrenRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(children.ref, childrenRef, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/node/Slider/useSlider.js

@@ -192,7 +192,7 @@ function useSlider(parameters) {
     tabIndex,
     value: valueProp
   } = parameters;
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
   // - The active state isn't transferred when inversing a range slider.
@@ -236,7 +236,7 @@ function useSlider(parameters) {
     ref: focusVisibleRef
   } = (0, _utils.unstable_useIsFocusVisible)();
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
-  const sliderRef = React.useRef();
+  const sliderRef = React.useRef(null);
   const handleFocusRef = (0, _utils.unstable_useForkRef)(focusVisibleRef, sliderRef);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, handleFocusRef);
   const createHandleHiddenInputFocus = otherHandlers => event => {
@@ -347,7 +347,7 @@ function useSlider(parameters) {
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
-  const previousIndex = React.useRef();
+  const previousIndex = React.useRef(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';

package/node/Tabs/ScrollbarSize.js

@@ -59,9 +59,10 @@ function ScrollbarSize(props) {
     onChange(scrollbarHeight.current);
   }, [onChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-    style: styles,
+    style: styles
+  }, other, {
     ref: nodeRef
-  }, other));
+  }));
 }
 process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
   onChange: _propTypes.default.func.isRequired

package/node/Tooltip/Tooltip.js

@@ -18,6 +18,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _appendOwnerState = _interopRequireDefault(require("@mui/utils/appendOwnerState"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _styles = require("../styles");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -436,7 +437,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = (0, _useForkRef.default)(children.ref, focusVisibleRef, setChildNode, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), focusVisibleRef, setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/node/Unstable_TrapFocus/FocusTrap.js

@@ -100,8 +100,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = (0, _utils.unstable_useForkRef)(children.ref, rootRef);
+  const handleRef = (0, _utils.unstable_useForkRef)((0, _utils.unstable_getReactElementRef)(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/node/Zoom/Zoom.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -58,7 +59,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.7
+ * @mui/material v5.16.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/useAutocomplete/useAutocomplete.js

@@ -69,6 +69,7 @@ const defaultIsActiveElementInListbox = listboxRef => {
   var _listboxRef$current$p;
   return listboxRef.current !== null && ((_listboxRef$current$p = listboxRef.current.parentElement) == null ? void 0 : _listboxRef$current$p.contains(document.activeElement));
 };
+const MULTIPLE_DEFAULT_VALUE = [];
 function useAutocomplete(props) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -82,7 +83,7 @@ function useAutocomplete(props) {
     clearOnBlur = !props.freeSolo,
     clearOnEscape = false,
     componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
+    defaultValue = props.multiple ? MULTIPLE_DEFAULT_VALUE : null,
     disableClearable = false,
     disableCloseOnSelect = false,
     disabled: disabledProp,

package/node/version/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.preReleaseNumber = exports.preReleaseLabel = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "5.16.7";
+const version = exports.version = "5.16.9";
 const major = exports.major = Number("5");
 const minor = exports.minor = Number("16");
-const patch = exports.patch = Number("7");
+const patch = exports.patch = Number("9");
 const preReleaseLabel = exports.preReleaseLabel = undefined || null;
 const preReleaseNumber = exports.preReleaseNumber = Number(undefined) || null;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.16.7",
+  "version": "5.16.9",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "https://mui.com/material-ui/",
+  "homepage": "https://v5.mui.com/material-ui/",
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/mui-org"
@@ -35,17 +35,17 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/system": "^5.16.7",
-    "@mui/utils": "^5.16.6",
+    "@mui/core-downloads-tracker": "^5.16.9",
+    "@mui/utils": "^5.16.8",
     "@mui/types": "^7.2.15",
-    "@mui/core-downloads-tracker": "^5.16.7"
+    "@mui/system": "^5.16.8"
   },
   "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": {
     "@types/react": {

package/styles/CssVarsProvider.d.ts

@@ -16,7 +16,7 @@ declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@
     storageWindow?: Window | null | undefined;
     disableNestedContext?: boolean | undefined;
     disableStyleSheetGeneration?: boolean | undefined;
-}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>;
+}>) => React.JSX.Element, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>;
 /**
  * @deprecated Use `InitColorSchemeScript` instead
  * ```diff

package/types/OverridableComponentAugmentation.d.ts

@@ -13,8 +13,8 @@ declare module '@mui/material/OverridableComponent' {
              * Either a string to use a HTML element or a component.
              */
             component: DefaultComponent;
-        } & OverridePropsVer2<TypeMap, DefaultComponent>): JSX.Element;
-        (props: DefaultComponentPropsVer2<TypeMap>): JSX.Element;
+        } & OverridePropsVer2<TypeMap, DefaultComponent>): React.JSX.Element;
+        (props: DefaultComponentPropsVer2<TypeMap>): React.JSX.Element;
     }
     /**
      * Props of the component if `component={Component}` is used.