diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js
index 12e3d5c4acdae1..ec5015fb1f4dfb 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.js
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.js
@@ -87,39 +87,37 @@ export default function Checkout() {
               </Step>
             ))}
           </Stepper>
-          <React.Fragment>
-            {activeStep === steps.length ? (
-              <React.Fragment>
-                <Typography variant="h5" gutterBottom>
-                  Thank you for your order.
-                </Typography>
-                <Typography variant="subtitle1">
-                  Your order number is #2001539. We have emailed your order
-                  confirmation, and will send you an update when your order has
-                  shipped.
-                </Typography>
-              </React.Fragment>
-            ) : (
-              <React.Fragment>
-                {getStepContent(activeStep)}
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-                  {activeStep !== 0 && (
-                    <Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
-                      Back
-                    </Button>
-                  )}
-
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 3, ml: 1 }}
-                  >
-                    {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+          {activeStep === steps.length ? (
+            <React.Fragment>
+              <Typography variant="h5" gutterBottom>
+                Thank you for your order.
+              </Typography>
+              <Typography variant="subtitle1">
+                Your order number is #2001539. We have emailed your order
+                confirmation, and will send you an update when your order has
+                shipped.
+              </Typography>
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+              {getStepContent(activeStep)}
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                {activeStep !== 0 && (
+                  <Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
+                    Back
                   </Button>
-                </Box>
-              </React.Fragment>
-            )}
-          </React.Fragment>
+                )}
+
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 3, ml: 1 }}
+                >
+                  {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                </Button>
+              </Box>
+            </React.Fragment>
+          )}
         </Paper>
         <Copyright />
       </Container>
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
index e6c50f7abf96d4..cacb372c34cbac 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
@@ -87,38 +87,36 @@ export default function Checkout() {
               </Step>
             ))}
           </Stepper>
-          <React.Fragment>
-            {activeStep === steps.length ? (
-              <React.Fragment>
-                <Typography variant="h5" gutterBottom>
-                  Thank you for your order.
-                </Typography>
-                <Typography variant="subtitle1">
-                  Your order number is #2001539. We have emailed your order
-                  confirmation, and will send you an update when your order has
-                  shipped.
-                </Typography>
-              </React.Fragment>
-            ) : (
-              <React.Fragment>
-                {getStepContent(activeStep)}
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-                  {activeStep !== 0 && (
-                    <Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
-                      Back
-                    </Button>
-                  )}
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 3, ml: 1 }}
-                  >
-                    {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+          {activeStep === steps.length ? (
+            <React.Fragment>
+              <Typography variant="h5" gutterBottom>
+                Thank you for your order.
+              </Typography>
+              <Typography variant="subtitle1">
+                Your order number is #2001539. We have emailed your order
+                confirmation, and will send you an update when your order has
+                shipped.
+              </Typography>
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+              {getStepContent(activeStep)}
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                {activeStep !== 0 && (
+                  <Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
+                    Back
                   </Button>
-                </Box>
-              </React.Fragment>
-            )}
-          </React.Fragment>
+                )}
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 3, ml: 1 }}
+                >
+                  {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                </Button>
+              </Box>
+            </React.Fragment>
+          )}
         </Paper>
         <Copyright />
       </Container>
diff --git a/docs/scripts/helpers.js b/docs/scripts/helpers.js
index 2a708084475cce..27b95d16c6e41c 100644
--- a/docs/scripts/helpers.js
+++ b/docs/scripts/helpers.js
@@ -8,7 +8,7 @@ function getLineFeed(source) {
   return match === null ? os.EOL : match[0];
 }
 
-const fixBabelIssuesRegExp = new RegExp(/(?<=(\/>)|,)(\r?\n){2}/g);
+const fixBabelIssuesRegExp = /(?<=(\/>)|,)(\r?\n){2}/g;
 /**
  * @param {string} source
  */
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index dbd717254dc609..ffb7d5383ac61a 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -296,7 +296,7 @@ export default function AppNavDrawer(props) {
 
     const navItems = renderNavItems({ onClose, pages, activePage, depth: 0, t });
 
-    const renderVersionSelector = (versions = [], sx) => {
+    const renderVersionSelector = (versions, sx) => {
       if (!versions?.length) {
         return null;
       }
diff --git a/docs/src/modules/utils/i18n.js b/docs/src/modules/utils/i18n.js
index bf0afbf031bebb..7f26e577b36c60 100644
--- a/docs/src/modules/utils/i18n.js
+++ b/docs/src/modules/utils/i18n.js
@@ -1,10 +1,10 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
+import PropTypes from 'prop-types';
 
 function mapTranslations(req) {
   const translations = {};
   req.keys().forEach((filename) => {
-    const match = filename.match(new RegExp(`-([a-z]{2}).json$`));
+    const match = filename.match(/-([a-z]{2}).json$/);
 
     if (match) {
       translations[match[1]] = req(filename);
diff --git a/docs/src/modules/utils/replaceUrl.ts b/docs/src/modules/utils/replaceUrl.ts
index 9c3f7fa9123ba2..47814e10334d2c 100644
--- a/docs/src/modules/utils/replaceUrl.ts
+++ b/docs/src/modules/utils/replaceUrl.ts
@@ -17,10 +17,7 @@ export const replaceMaterialLinks = (url: string) => {
   if (isNewLocation(url)) {
     return url;
   }
-  return url.replace(
-    new RegExp(`(guides|customization|getting-started|discover-more)`),
-    'material-ui/$1',
-  );
+  return url.replace(/(guides|customization|getting-started|discover-more)/, 'material-ui/$1');
 };
 
 export const replaceComponentLinks = (url: string) => {
diff --git a/examples/nextjs-with-typescript-v4-migration/pages/about.tsx b/examples/nextjs-with-typescript-v4-migration/pages/about.tsx
index bdd45d7720b6da..1a96c14f7f77fd 100644
--- a/examples/nextjs-with-typescript-v4-migration/pages/about.tsx
+++ b/examples/nextjs-with-typescript-v4-migration/pages/about.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { NextPage } from 'next';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -20,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const About: NextPage = () => {
+export default function About() {
   const classes = useStyles();
   return (
     <Container maxWidth="lg">
@@ -38,6 +37,4 @@ const About: NextPage = () => {
       </div>
     </Container>
   );
-};
-
-export default About;
+}
diff --git a/examples/nextjs-with-typescript-v4-migration/pages/index.tsx b/examples/nextjs-with-typescript-v4-migration/pages/index.tsx
index cbf5d540c9ce97..b8e977a331b101 100644
--- a/examples/nextjs-with-typescript-v4-migration/pages/index.tsx
+++ b/examples/nextjs-with-typescript-v4-migration/pages/index.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { NextPage } from 'next';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
@@ -18,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const Home: NextPage = () => {
+export default function Home() {
   const classes = useStyles();
 
   return (
@@ -35,6 +34,4 @@ const Home: NextPage = () => {
       </div>
     </Container>
   );
-};
-
-export default Home;
+}
diff --git a/examples/nextjs-with-typescript/pages/about.tsx b/examples/nextjs-with-typescript/pages/about.tsx
index 681ecaba1954e2..d8e78127461be8 100644
--- a/examples/nextjs-with-typescript/pages/about.tsx
+++ b/examples/nextjs-with-typescript/pages/about.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { NextPage } from 'next';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -8,7 +7,7 @@ import Link from '../src/Link';
 import ProTip from '../src/ProTip';
 import Copyright from '../src/Copyright';
 
-const About: NextPage = () => {
+export default function About() {
   return (
     <Container maxWidth="lg">
       <Box
@@ -33,6 +32,4 @@ const About: NextPage = () => {
       </Box>
     </Container>
   );
-};
-
-export default About;
+}
diff --git a/examples/nextjs-with-typescript/pages/index.tsx b/examples/nextjs-with-typescript/pages/index.tsx
index e8f815b4812d03..e244a691682dfb 100644
--- a/examples/nextjs-with-typescript/pages/index.tsx
+++ b/examples/nextjs-with-typescript/pages/index.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { NextPage } from 'next';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -7,7 +6,7 @@ import Link from '../src/Link';
 import ProTip from '../src/ProTip';
 import Copyright from '../src/Copyright';
 
-const Home: NextPage = () => {
+export default function Home() {
   return (
     <Container maxWidth="lg">
       <Box
@@ -30,6 +29,4 @@ const Home: NextPage = () => {
       </Box>
     </Container>
   );
-};
-
-export default Home;
+}
diff --git a/packages/mui-base/src/utils/appendOwnerState.ts b/packages/mui-base/src/utils/appendOwnerState.ts
index b6c87597b0f23b..cb0abf1852512c 100644
--- a/packages/mui-base/src/utils/appendOwnerState.ts
+++ b/packages/mui-base/src/utils/appendOwnerState.ts
@@ -1,5 +1,5 @@
+import * as React from 'react';
 import { Simplify } from '@mui/types';
-import React from 'react';
 import isHostComponent from './isHostComponent';
 
 /**