diff --git a/docs/data/material/customization/color/Color.js b/docs/data/material/customization/color/Color.js
index 2e69bfb2e1c77b..cd1960f6d0d210 100644
--- a/docs/data/material/customization/color/Color.js
+++ b/docs/data/material/customization/color/Color.js
@@ -64,7 +64,7 @@ function getColorBlock(theme, colorName, colorValue, colorTitle) {
     padding: 15,
   };
 
-  if (colorValue.toString().indexOf('A1') === 0) {
+  if (colorValue.toString().startsWith('A1')) {
     rowStyle = {
       ...rowStyle,
       marginTop: 4,
diff --git a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
index d9d8fab9e425e4..d16d4d926ee859 100644
--- a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
+++ b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
@@ -236,7 +236,7 @@ export default function MaterialUIComponents() {
               </TableCell>
               <TableCell>
                 {component.materialUI &&
-                component.materialUI.indexOf('/material-ui') === 0 ? (
+                component.materialUI.startsWith('/material-ui') ? (
                   <Link
                     variant="body2"
                     data-no-markdown-link="true"
@@ -245,7 +245,7 @@ export default function MaterialUIComponents() {
                     Native support
                   </Link>
                 ) : null}
-                {component.materialUI && component.materialUI.indexOf('/x') === 0 ? (
+                {component.materialUI && component.materialUI.startsWith('/x') ? (
                   <Link
                     variant="body2"
                     data-no-markdown-link="true"
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index c5047f86c1f6fd..1752c016ee7382 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -105,7 +105,7 @@ async function registerServiceWorker() {
   if (
     'serviceWorker' in navigator &&
     process.env.NODE_ENV === 'production' &&
-    window.location.host.indexOf('mui.com') !== -1
+    window.location.host.includes('mui.com')
   ) {
     // register() automatically attempts to refresh the sw.js.
     const registration = await navigator.serviceWorker.register('/sw.js');
diff --git a/docs/pages/versions.js b/docs/pages/versions.js
index b0c0cc3555be6b..a4addeda6a4e50 100644
--- a/docs/pages/versions.js
+++ b/docs/pages/versions.js
@@ -45,7 +45,7 @@ Page.getInitialProps = async () => {
    */
   const versions = [];
   branches.forEach((branch) => {
-    if (FILTERED_BRANCHES.indexOf(branch.name) === -1) {
+    if (!FILTERED_BRANCHES.includes(branch.name)) {
       const version = branch.name;
       versions.push({
         version,
diff --git a/docs/scripts/updateIconSynonyms.js b/docs/scripts/updateIconSynonyms.js
index 3d609b4b9c293b..6b3cc0f1f6c152 100644
--- a/docs/scripts/updateIconSynonyms.js
+++ b/docs/scripts/updateIconSynonyms.js
@@ -7,7 +7,7 @@ import synonyms from 'docs/data/material/components/material-icons/synonyms';
 import myDestRewriter from '../../packages/mui-icons-material/renameFilters/material-design-icons';
 
 function not(a, b) {
-  return a.filter((value) => b.indexOf(value) === -1);
+  return a.filter((value) => !b.includes(value));
 }
 
 function union(a, b) {
diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx
index 1b6809d16d98cf..c9831334f604e5 100644
--- a/docs/src/components/icon/IconImage.tsx
+++ b/docs/src/components/icon/IconImage.tsx
@@ -64,7 +64,7 @@ export default function IconImage(props: IconImageProps) {
   } else if (name.startsWith('pricing/x-plan-')) {
     defaultWidth = 13;
     defaultHeight = 15;
-  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].indexOf(name) !== -1) {
+  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
     defaultWidth = 18;
     defaultHeight = 18;
   }
diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
index bba181c105ad87..b718f527b0cf26 100644
--- a/docs/src/modules/components/AppLayoutDocsFooter.js
+++ b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -81,7 +81,7 @@ function orderedPages(pages, current = []) {
 }
 
 async function postFeedback(data) {
-  const env = window.location.host.indexOf('mui.com') !== -1 ? 'prod' : 'dev';
+  const env = window.location.host.includes('mui.com') ? 'prod' : 'dev';
   try {
     const response = await fetch(`${process.env.FEEDBACK_URL}/${env}/feedback`, {
       method: 'POST',
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index b1125b6210398f..561140d66d032c 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -261,8 +261,9 @@ function reduceChildRoutes(context) {
 
   const title = pageToTitleI18n(page, t);
   if (page.children && page.children.length >= 1) {
-    const topLevel =
-      activePageParents.map((parentPage) => parentPage.pathname).indexOf(page.pathname) !== -1;
+    const topLevel = activePageParents
+      .map((parentPage) => parentPage.pathname)
+      .includes(page.pathname);
 
     let firstChild = page.children[0];
 
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 3b8d9f4189b7cd..2c2dcd6303968a 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -342,8 +342,9 @@ export default function AppSearch(props) {
   const searchButtonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const [initialQuery, setInitialQuery] = React.useState(undefined);
-  const facetFilterLanguage =
-    LANGUAGES_SSR.indexOf(userLanguage) !== -1 ? `language:${userLanguage}` : `language:en`;
+  const facetFilterLanguage = LANGUAGES_SSR.includes(userLanguage)
+    ? `language:${userLanguage}`
+    : `language:en`;
   const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
   const onOpen = React.useCallback(() => {
     setIsOpen(true);
diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts
index b34c9dd36dc4c6..402276e228dad6 100644
--- a/docs/src/modules/sandbox/Dependencies.ts
+++ b/docs/src/modules/sandbox/Dependencies.ts
@@ -14,7 +14,7 @@ const muiNpmOrgs = ['@mui', '@base_ui', '@pigment-css', '@toolpad'];
  */
 function addTypeDeps(deps: Record<string, string>): void {
   const packagesWithDTPackage = Object.keys(deps)
-    .filter((name) => packagesWithBundledTypes.indexOf(name) === -1)
+    .filter((name) => !packagesWithBundledTypes.includes(name))
     // All the MUI packages come with bundled types
     .filter((name) => !muiNpmOrgs.some((org) => name.startsWith(org)));
 
diff --git a/docs/src/modules/utils/find.mjs b/docs/src/modules/utils/find.mjs
index cffc301583f296..a5221c421cd2a7 100644
--- a/docs/src/modules/utils/find.mjs
+++ b/docs/src/modules/utils/find.mjs
@@ -38,15 +38,11 @@ export function findPages(
       .replace(/^\/index$/, '/') // Replace `index` by `/`.
       .replace(/\/index$/, '');
 
-    if (pathname.indexOf('.eslintrc') !== -1) {
+    if (pathname.includes('.eslintrc')) {
       return;
     }
 
-    if (
-      options.front &&
-      pathname.indexOf('/components') === -1 &&
-      pathname.indexOf('/api-docs') === -1
-    ) {
+    if (options.front && !pathname.includes('/components') && !pathname.includes('/api-docs')) {
       return;
     }
 
diff --git a/docs/src/modules/utils/helpers.ts b/docs/src/modules/utils/helpers.ts
index 483544a9d57b24..4f9c39a048b20c 100644
--- a/docs/src/modules/utils/helpers.ts
+++ b/docs/src/modules/utils/helpers.ts
@@ -31,12 +31,12 @@ export function pageToTitle(page: Page): string | null {
   const name = path.replace(/.*\//, '').replace('react-', '').replace(/\..*/, '');
 
   // TODO remove post migration
-  if (path.indexOf('/api-docs/') !== -1) {
+  if (path.includes('/api-docs/')) {
     return pascalCase(name);
   }
 
   // TODO support more than React component API (PascalCase)
-  if (path.indexOf('/api/') !== -1) {
+  if (path.includes('/api/')) {
     return name.startsWith('use') ? camelCase(name) : pascalCase(name);
   }
 
@@ -87,8 +87,8 @@ export function pathnameToLanguage(pathname: string): {
   const userLanguageCandidate = pathname.substring(1, 3);
 
   if (
-    [...LANGUAGES, 'zh'].indexOf(userLanguageCandidate) !== -1 &&
-    pathname.indexOf(`/${userLanguageCandidate}/`) === 0
+    [...LANGUAGES, 'zh'].includes(userLanguageCandidate) &&
+    pathname.startsWith(`/${userLanguageCandidate}/`)
   ) {
     userLanguage = userLanguageCandidate;
   } else {
diff --git a/docs/src/pages/versions/ReleasedVersions.js b/docs/src/pages/versions/ReleasedVersions.js
index 0ff71cd1716dd6..ede4cedc2c2833 100644
--- a/docs/src/pages/versions/ReleasedVersions.js
+++ b/docs/src/pages/versions/ReleasedVersions.js
@@ -31,8 +31,7 @@ function ReleasedVersions() {
                 </Link>
               </TableCell>
               <TableCell>
-                {doc.version.length >= 6 &&
-                doc.version.indexOf('pre-release') === -1 ? (
+                {doc.version.length >= 6 && !doc.version.includes('pre-release') ? (
                   <Link
                     variant="body2"
                     rel="nofollow"
diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
index 3432a346e2e728..001edef81130bc 100644
--- a/packages/markdown/parseMarkdown.js
+++ b/packages/markdown/parseMarkdown.js
@@ -389,7 +389,7 @@ function createRender(context) {
 
       checkUrlHealth(href, linkText, context);
 
-      if (userLanguage !== 'en' && href.indexOf('/') === 0 && !options.ignoreLanguagePages(href)) {
+      if (userLanguage !== 'en' && href.startsWith('/') && !options.ignoreLanguagePages(href)) {
         finalHref = `/${userLanguage}${href}`;
       }
 
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
index e5a96f95ab7749..8285bd54eefa53 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
@@ -45,7 +45,7 @@ export function createFilterOptions(config = {}) {
           }
 
           return matchFrom === 'start'
-            ? candidate.indexOf(input) === 0
+            ? candidate.startsWith(input)
             : candidate.indexOf(input) > -1;
         });
 
diff --git a/packages/mui-base/src/useList/listReducer.ts b/packages/mui-base/src/useList/listReducer.ts
index 975d692834e2f8..9c67190af6ea35 100644
--- a/packages/mui-base/src/useList/listReducer.ts
+++ b/packages/mui-base/src/useList/listReducer.ts
@@ -352,7 +352,7 @@ function textCriteriaMatches<ItemValue>(
     return false;
   }
 
-  return text.indexOf(searchString) === 0;
+  return text.startsWith(searchString);
 }
 
 function handleTextNavigation<ItemValue, State extends ListState<ItemValue>>(
diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
index e39ee3862e2540..695a8416fcfc3b 100644
--- a/packages/mui-base/src/useSlider/useSlider.ts
+++ b/packages/mui-base/src/useSlider/useSlider.ts
@@ -413,7 +413,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     const { width, height, bottom, left } = slider!.getBoundingClientRect();
     let percent;
 
-    if (axis.indexOf('vertical') === 0) {
+    if (axis.startsWith('vertical')) {
       percent = (bottom - finger.y) / height;
     } else {
       percent = (finger.x - left) / width;
diff --git a/packages/mui-codemod/src/v0.15.0/import-path.js b/packages/mui-codemod/src/v0.15.0/import-path.js
index b91a3739385a1e..ff616ab0267a6b 100644
--- a/packages/mui-codemod/src/v0.15.0/import-path.js
+++ b/packages/mui-codemod/src/v0.15.0/import-path.js
@@ -60,11 +60,11 @@ const pathBaseSource = ['material-ui/src/', 'material-ui/src/'];
 const pathBasePackage = ['material-ui/lib/', 'material-ui/'];
 
 function getPathsBase(path) {
-  if (path.indexOf(pathBaseSource[0]) === 0) {
+  if (path.startsWith(pathBaseSource[0])) {
     return pathBaseSource;
   }
 
-  if (path.indexOf(pathBasePackage[0]) === 0) {
+  if (path.startsWith(pathBasePackage[0])) {
     return pathBasePackage;
   }
 
diff --git a/packages/mui-docs/src/Link/Link.tsx b/packages/mui-docs/src/Link/Link.tsx
index 79e5079efba393..a07bc8abf0838e 100644
--- a/packages/mui-docs/src/Link/Link.tsx
+++ b/packages/mui-docs/src/Link/Link.tsx
@@ -103,7 +103,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link
   if (
     userLanguage !== 'en' &&
     pathname &&
-    pathname.indexOf('/') === 0 &&
+    pathname.startsWith('/') &&
     !LANGUAGES_IGNORE_PAGES(pathname) &&
     !pathname.startsWith(`/${userLanguage}/`)
   ) {
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
index 30638d94f6730a..1592a14a175608 100644
--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -285,7 +285,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
 
   if (toggleButtonGroup?.value) {
     if (Array.isArray(toggleButtonGroup.value)) {
-      ariaPressed = toggleButtonGroup.value.indexOf(props.value as string) !== -1;
+      ariaPressed = toggleButtonGroup.value.includes(props.value as string);
     } else {
       ariaPressed = toggleButtonGroup.value === props.value;
     }
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 6d730c5c72c297..2420ca1cc05760 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -233,7 +233,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
 
   if (toggleButtonGroup?.value) {
     if (Array.isArray(toggleButtonGroup.value)) {
-      ariaPressed = toggleButtonGroup.value.indexOf(props.value as string) !== -1;
+      ariaPressed = toggleButtonGroup.value.includes(props.value as string);
     } else {
       ariaPressed = toggleButtonGroup.value === props.value;
     }
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index 0ecbcd057d368b..692c375f2ef334 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -568,7 +568,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
 
           let markActive;
           if (track === false) {
-            markActive = values.indexOf(mark.value) !== -1;
+            markActive = values.includes(mark.value);
           } else {
             markActive =
               (track === 'normal' &&
diff --git a/packages/mui-joy/src/styles/styleUtils.ts b/packages/mui-joy/src/styles/styleUtils.ts
index e2ad445fe31f64..ceab9e4650640e 100644
--- a/packages/mui-joy/src/styles/styleUtils.ts
+++ b/packages/mui-joy/src/styles/styleUtils.ts
@@ -41,10 +41,7 @@ export const resolveSxValue = <K extends string>(
           } else {
             sxObject[key] = theme.vars?.radius[value as keyof typeof theme.vars.radius] || value;
           }
-        } else if (
-          ['p', 'padding', 'm', 'margin'].indexOf(key) !== -1 &&
-          typeof value === 'number'
-        ) {
+        } else if (['p', 'padding', 'm', 'margin'].includes(key) && typeof value === 'number') {
           sxObject[key] = theme.spacing(value);
         } else {
           sxObject[key] = value;
diff --git a/packages/mui-material/src/CardMedia/CardMedia.js b/packages/mui-material/src/CardMedia/CardMedia.js
index 9a11d422b579db..c3c2a09f19cf31 100644
--- a/packages/mui-material/src/CardMedia/CardMedia.js
+++ b/packages/mui-material/src/CardMedia/CardMedia.js
@@ -55,7 +55,7 @@ const CardMedia = React.forwardRef(function CardMedia(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiCardMedia' });
   const { children, className, component = 'div', image, src, style, ...other } = props;
 
-  const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
+  const isMediaComponent = MEDIA_COMPONENTS.includes(component);
   const composedStyle =
     !isMediaComponent && image ? { backgroundImage: `url("${image}")`, ...style } : style;
 
@@ -63,7 +63,7 @@ const CardMedia = React.forwardRef(function CardMedia(inProps, ref) {
     ...props,
     component,
     isMediaComponent,
-    isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1,
+    isImageComponent: IMAGE_COMPONENTS.includes(component),
   };
 
   const classes = useUtilityClasses(ownerState);
diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index 7973cbbea62aae..bca98f317cd493 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -167,7 +167,7 @@ const oppositeDirection = {
 };
 
 export function isHorizontal(anchor) {
-  return ['left', 'right'].indexOf(anchor) !== -1;
+  return ['left', 'right'].includes(anchor);
 }
 
 export function getAnchor({ direction }, anchor) {
diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
index 5856cf5d0f093d..c232d9be41936a 100644
--- a/packages/mui-material/src/Grid/Grid.js
+++ b/packages/mui-material/src/Grid/Grid.js
@@ -112,7 +112,7 @@ export function generateDirection({ theme, ownerState }) {
       flexDirection: propValue,
     };
 
-    if (propValue.indexOf('column') === 0) {
+    if (propValue.startsWith('column')) {
       output[`& > .${gridClasses.item}`] = {
         maxWidth: 'none',
       };
diff --git a/packages/mui-material/src/MenuList/MenuList.js b/packages/mui-material/src/MenuList/MenuList.js
index 29b80a6a3ec953..dcb0a4efa03f03 100644
--- a/packages/mui-material/src/MenuList/MenuList.js
+++ b/packages/mui-material/src/MenuList/MenuList.js
@@ -44,7 +44,7 @@ function textCriteriaMatches(nextFocus, textCriteria) {
   if (textCriteria.repeating) {
     return text[0] === textCriteria.keys[0];
   }
-  return text.indexOf(textCriteria.keys.join('')) === 0;
+  return text.startsWith(textCriteria.keys.join(''));
 }
 
 function moveFocus(
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index c135d483a9fae7..4d6817f9ad0c13 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1201,7 +1201,7 @@ describe('<Select />', () => {
         function ControlledSelectInput(props) {
           const { onChange } = props;
           const [values, clickedValue] = React.useReducer((currentValues, valueClicked) => {
-            if (currentValues.indexOf(valueClicked) === -1) {
+            if (!currentValues.includes(valueClicked)) {
               return currentValues.concat(valueClicked);
             }
             return currentValues.filter((value) => {
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 3d6dc7ebe9b3da..b79a033c6eb4b2 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -316,7 +316,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         'Enter',
       ];
 
-      if (validKeys.indexOf(event.key) !== -1) {
+      if (validKeys.includes(event.key)) {
         event.preventDefault();
         update(true, event);
       }
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index e2ddfc3bc94958..c07fa70870cb9c 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -728,7 +728,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) {
 
           let markActive;
           if (track === false) {
-            markActive = values.indexOf(mark.value) !== -1;
+            markActive = values.includes(mark.value);
           } else {
             markActive =
               (track === 'normal' &&
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index 02b9e9354e13d1..08c688a6f8bc2e 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -188,7 +188,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
       const { mode = null, changeTransition = true } = options;
 
       const anchorRtl = getAnchor(theme, anchor);
-      const rtlTranslateMultiplier = ['right', 'bottom'].indexOf(anchorRtl) !== -1 ? 1 : -1;
+      const rtlTranslateMultiplier = ['right', 'bottom'].includes(anchorRtl) ? 1 : -1;
       const horizontalSwipe = isHorizontal(anchor);
 
       const transform = horizontalSwipe
diff --git a/packages/mui-material/src/styles/createThemeNoVars.js b/packages/mui-material/src/styles/createThemeNoVars.js
index 527c29474994ec..77e5abdeafba79 100644
--- a/packages/mui-material/src/styles/createThemeNoVars.js
+++ b/packages/mui-material/src/styles/createThemeNoVars.js
@@ -68,7 +68,7 @@ function createThemeNoVars(options = {}, ...args) {
       // eslint-disable-next-line guard-for-in
       for (key in node) {
         const child = node[key];
-        if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
+        if (stateClasses.includes(key) && Object.keys(child).length > 0) {
           if (process.env.NODE_ENV !== 'production') {
             const stateClass = generateUtilityClass('', key);
             console.error(
@@ -102,7 +102,7 @@ function createThemeNoVars(options = {}, ...args) {
     Object.keys(muiTheme.components).forEach((component) => {
       const styleOverrides = muiTheme.components[component].styleOverrides;
 
-      if (styleOverrides && component.indexOf('Mui') === 0) {
+      if (styleOverrides && component.startsWith('Mui')) {
         traverse(styleOverrides, component);
       }
     });
diff --git a/packages/mui-material/src/usePagination/usePagination.js b/packages/mui-material/src/usePagination/usePagination.js
index 999a419cf4d589..d76cb58e6be8e9 100644
--- a/packages/mui-material/src/usePagination/usePagination.js
+++ b/packages/mui-material/src/usePagination/usePagination.js
@@ -135,7 +135,7 @@ export default function usePagination(props = {}) {
           selected: false,
           disabled:
             disabled ||
-            (item.indexOf('ellipsis') === -1 &&
+            (!item.includes('ellipsis') &&
               (item === 'next' || item === 'last' ? page >= count : page <= 1)),
         };
   });
diff --git a/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js b/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js
index f2843f85fb7aa7..5571eefcd73c48 100644
--- a/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js
+++ b/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js
@@ -50,7 +50,7 @@ export default function createGenerateClassName(options = {}) {
     const name = styleSheet.options.name;
 
     // Is a global static MUI style?
-    if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
+    if (name && name.startsWith('Mui') && !styleSheet.options.link && !disableGlobal) {
       // We can use a shorthand class name, we never use the keys to style the components.
       if (stateClasses.indexOf(rule.key) !== -1) {
         return `Mui-${rule.key}`;
diff --git a/packages/mui-system/src/Grid/traverseBreakpoints.ts b/packages/mui-system/src/Grid/traverseBreakpoints.ts
index c117df14800454..ae874a94cc4820 100644
--- a/packages/mui-system/src/Grid/traverseBreakpoints.ts
+++ b/packages/mui-system/src/Grid/traverseBreakpoints.ts
@@ -36,7 +36,7 @@ export const traverseBreakpoints = <T = unknown>(
         : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
 
     keys.forEach((key) => {
-      if (breakpoints.keys.indexOf(key as Breakpoint) !== -1) {
+      if (breakpoints.keys.includes(key as Breakpoint)) {
         // @ts-ignore already checked that responsive is an object
         const breakpointValue: T = responsive[key];
         if (breakpointValue !== undefined) {
diff --git a/packages/mui-system/src/breakpoints/breakpoints.js b/packages/mui-system/src/breakpoints/breakpoints.js
index ee98789726298e..d42548f337f7b2 100644
--- a/packages/mui-system/src/breakpoints/breakpoints.js
+++ b/packages/mui-system/src/breakpoints/breakpoints.js
@@ -58,7 +58,7 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
         }
       }
       // key is breakpoint
-      else if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
         const mediaKey = themeBreakpoints.up(breakpoint);
         acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
       } else {
diff --git a/packages/mui-system/src/colorManipulator/colorManipulator.js b/packages/mui-system/src/colorManipulator/colorManipulator.js
index 7ec96f0060ab18..721949fb2a296e 100644
--- a/packages/mui-system/src/colorManipulator/colorManipulator.js
+++ b/packages/mui-system/src/colorManipulator/colorManipulator.js
@@ -68,7 +68,7 @@ export function decomposeColor(color) {
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
 
-  if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
+  if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
     throw new MuiError(
       'MUI: Unsupported `%s` color.\n' +
         'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
@@ -85,7 +85,7 @@ export function decomposeColor(color) {
     if (values.length === 4 && values[3].charAt(0) === '/') {
       values[3] = values[3].slice(1);
     }
-    if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
+    if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
       throw new MuiError(
         'MUI: unsupported `%s` color space.\n' +
           'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.',
@@ -110,7 +110,7 @@ export const colorChannel = (color) => {
   const decomposedColor = decomposeColor(color);
   return decomposedColor.values
     .slice(0, 3)
-    .map((val, idx) => (decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val))
+    .map((val, idx) => (decomposedColor.type.includes('hsl') && idx !== 0 ? `${val}%` : val))
     .join(' ');
 };
 export const private_safeColorChannel = (color, warning) => {
@@ -135,14 +135,14 @@ export function recomposeColor(color) {
   const { type, colorSpace } = color;
   let { values } = color;
 
-  if (type.indexOf('rgb') !== -1) {
+  if (type.includes('rgb')) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map((n, i) => (i < 3 ? parseInt(n, 10) : n));
-  } else if (type.indexOf('hsl') !== -1) {
+  } else if (type.includes('hsl')) {
     values[1] = `${values[1]}%`;
     values[2] = `${values[2]}%`;
   }
-  if (type.indexOf('color') !== -1) {
+  if (type.includes('color')) {
     values = `${colorSpace} ${values.join(' ')}`;
   } else {
     values = `${values.join(', ')}`;
@@ -158,7 +158,7 @@ export function recomposeColor(color) {
  */
 export function rgbToHex(color) {
   // Idempotent
-  if (color.indexOf('#') === 0) {
+  if (color.startsWith('#')) {
     return color;
   }
 
@@ -273,9 +273,9 @@ export function darken(color, coefficient) {
   color = decomposeColor(color);
   coefficient = clampWrapper(coefficient);
 
-  if (color.type.indexOf('hsl') !== -1) {
+  if (color.type.includes('hsl')) {
     color.values[2] *= 1 - coefficient;
-  } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
+  } else if (color.type.includes('rgb') || color.type.includes('color')) {
     for (let i = 0; i < 3; i += 1) {
       color.values[i] *= 1 - coefficient;
     }
@@ -303,13 +303,13 @@ export function lighten(color, coefficient) {
   color = decomposeColor(color);
   coefficient = clampWrapper(coefficient);
 
-  if (color.type.indexOf('hsl') !== -1) {
+  if (color.type.includes('hsl')) {
     color.values[2] += (100 - color.values[2]) * coefficient;
-  } else if (color.type.indexOf('rgb') !== -1) {
+  } else if (color.type.includes('rgb')) {
     for (let i = 0; i < 3; i += 1) {
       color.values[i] += (255 - color.values[i]) * coefficient;
     }
-  } else if (color.type.indexOf('color') !== -1) {
+  } else if (color.type.includes('color')) {
     for (let i = 0; i < 3; i += 1) {
       color.values[i] += (1 - color.values[i]) * coefficient;
     }
diff --git a/packages/mui-system/src/spacing/spacing.js b/packages/mui-system/src/spacing/spacing.js
index ecf0ada82d05a1..955d89d1516d8e 100644
--- a/packages/mui-system/src/spacing/spacing.js
+++ b/packages/mui-system/src/spacing/spacing.js
@@ -195,7 +195,7 @@ export function getStyleFromPropValue(cssProperties, transformer) {
 function resolveCssProperty(props, keys, prop, transformer) {
   // Using a hash computation over an array iteration could be faster, but with only 28 items,
   // it's doesn't worth the bundle size.
-  if (keys.indexOf(prop) === -1) {
+  if (!keys.includes(prop)) {
     return null;
   }