From 3098cce48a0fcce27c15de94d59ef84fbf26c75a Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Wed, 9 Nov 2022 13:44:37 -0800
Subject: [PATCH] [core] ESLint fixes for tests (#34924)

Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
---
 .../MaterialUIComponents.js                   |   4 +-
 .../useAutocomplete.test.js                   |  16 +-
 .../src/BadgeUnstyled/BadgeUnstyled.spec.tsx  |   5 +-
 .../ButtonUnstyled/ButtonUnstyled.spec.tsx    |   5 +-
 .../src/ButtonUnstyled/useButton.test.tsx     |  28 +-
 .../mui-base/src/FocusTrap/FocusTrap.test.js  |  22 +-
 .../FormControlUnstyled.spec.tsx              |  67 +-
 .../src/InputUnstyled/InputUnstyled.spec.tsx  |   5 +-
 .../useControllableReducer.test.tsx           |  16 +-
 .../src/ListboxUnstyled/useListbox.test.tsx   |  24 +-
 .../MenuItemUnstyled.spec.tsx                 |   5 +-
 .../src/MenuUnstyled/MenuUnstyled.spec.tsx    |   5 +-
 .../src/ModalUnstyled/ModalUnstyled.spec.tsx  |   5 +-
 .../MultiSelectUnstyled.spec.tsx              |   5 +-
 .../OptionGroupUnstyled.spec.tsx              |   5 +-
 .../OptionUnstyled/OptionUnstyled.spec.tsx    |   5 +-
 .../PopperUnstyled/PopperUnstyled.spec.tsx    |   5 +-
 .../SelectUnstyled/SelectUnstyled.spec.tsx    |   5 +-
 .../SelectUnstyled/SelectUnstyled.test.tsx    |  20 +-
 .../SliderUnstyled/SliderUnstyled.spec.tsx    |   5 +-
 .../SnackbarUnstyled.spec.tsx                 |   4 +-
 .../SwitchUnstyled/SwitchUnstyled.spec.tsx    |   5 +-
 .../TabPanelUnstyled.spec.tsx                 |   5 +-
 .../src/TabUnstyled/TabUnstyled.spec.tsx      |   5 +-
 .../TablePaginationActionsUnstyled.spec.tsx   |   5 +-
 .../TablePaginationUnstyled.test.tsx          |   4 +-
 .../TabsListUnstyled.spec.tsx                 |   5 +-
 .../src/TabsUnstyled/TabsUnstyled.spec.tsx    |   5 +-
 .../src/utils/appendOwnerState.test.ts        |   4 +-
 .../mui-base/src/utils/useSlotProps.test.tsx  |   8 +-
 .../mui-joy/src/MenuItem/MenuItem.test.js     |   8 +-
 packages/mui-joy/src/Modal/Modal.test.tsx     |  22 +-
 packages/mui-joy/src/SvgIcon/SvgIcon.spec.tsx |   4 +-
 packages/mui-joy/src/SvgIcon/SvgIcon.test.js  |  12 +-
 packages/mui-joy/src/Tab/Tab.test.tsx         |   4 +-
 packages/mui-joy/src/TabList/TabList.test.tsx |   8 +-
 .../mui-joy/src/TabPanel/TabPanel.test.tsx    |   4 +-
 packages/mui-joy/src/Tabs/Tabs.test.tsx       |   4 +-
 .../src/styles/CssVarsProvider.test.tsx       |  48 +-
 .../mui-joy/src/styles/ThemeProvider.test.tsx |   8 +-
 .../mui-lab/src/TreeView/TreeView.test.js     |   4 +-
 .../src/Button/Button.spec.tsx                |   6 +-
 .../TablePagination/TablePagination.test.js   |   4 +-
 .../src/Accordion/Accordion.test.js           |  13 +-
 packages/mui-material/src/Alert/Alert.test.js |   8 +-
 .../mui-material/src/AppBar/AppBar.spec.tsx   |  27 +-
 .../src/Autocomplete/Autocomplete.spec.tsx    |   6 +-
 .../src/Autocomplete/Autocomplete.test.js     |  68 +-
 .../mui-material/src/Button/Button.spec.tsx   |  10 +-
 .../src/CardHeader/CardHeader.spec.tsx        |   5 +-
 .../src/Checkbox/Checkbox.test.js             |   4 +-
 .../src/Collapse/Collapse.test.js             |  16 +-
 .../DialogContentText.spec.tsx                |   4 +-
 .../FormControlLabel/FormControlLabel.test.js |   4 +-
 packages/mui-material/src/Grid/Grid.test.js   |   4 +-
 .../mui-material/src/Hidden/HiddenCss.test.js |   4 +-
 .../src/InputBase/InputBase.test.js           |   4 +-
 .../src/ListItemText/ListItemText.spec.tsx    |   4 +-
 packages/mui-material/src/Modal/Modal.test.js | 100 ++-
 .../mui-material/src/Paper/Paper.spec.tsx     |  25 +-
 .../mui-material/src/Select/Select.test.js    |  24 +-
 .../mui-material/src/Slider/Slider.test.js    |   6 +-
 .../src/Snackbar/Snackbar.test.js             |   4 +-
 .../src/SpeedDial/SpeedDial.test.js           |   4 +-
 .../src/StepContent/StepContent.test.js       |   4 +-
 .../src/StepLabel/StepLabel.test.js           |  12 +-
 .../mui-material/src/Stepper/Stepper.test.tsx |   8 +-
 .../mui-material/src/SvgIcon/SvgIcon.test.js  |  12 +-
 .../TablePagination/TablePagination.test.js   |   4 +-
 packages/mui-material/src/Tabs/Tabs.spec.tsx  |   8 +-
 .../mui-material/src/Tooltip/Tooltip.test.js  |  28 +-
 .../src/Typography/typography.spec.tsx        |   4 +-
 .../src/styles/CssVarsProvider.spec.tsx       |   4 +-
 .../src/styles/CssVarsProvider.test.js        |  36 +-
 .../mui-material/src/styles/styled.spec.tsx   |  10 +-
 .../mui-material/src/styles/styled.test.js    |  16 +-
 .../src/useMediaQuery/useMediaQuery.test.js   |  40 +-
 .../src/usePagination/usePagination.test.js   |   4 +-
 .../useScrollTrigger/useScrollTrigger.test.js |   8 +-
 .../src/utils/isMuiElement.test.js            |   4 +-
 .../test/typescript/components.spec.tsx       | 793 ++++++++++--------
 .../src/StylesProvider/StylesProvider.test.js |   4 +-
 .../src/makeStyles/makeStyles.test.js         |  54 +-
 .../mui-styles/src/styled/styled.spec.tsx     |  13 +-
 .../useThemeVariants/useThemeVariants.test.js |   4 +-
 .../src/withStyles/withStyles.test.js         |  20 +-
 .../src/withTheme/withTheme.test.js           |   4 +-
 packages/mui-styles/test/styles.spec.tsx      |  16 +-
 packages/mui-system/src/createStyled.test.js  |   8 +-
 .../src/cssVars/createCssVarsProvider.test.js |  88 +-
 .../src/cssVars/useCurrentColorScheme.test.js |  96 +--
 .../styleFunctionSx/styleFunctionSx.spec.tsx  |   4 +-
 packages/mui-system/src/styled.test.js        |   8 +-
 .../mui-utils/src/chainpropTypes.spec.tsx     |   2 +-
 .../src/elementAcceptingRef.test.tsx          |   4 +-
 .../src/elementTypeAcceptingRef.test.tsx      |   4 +-
 .../mui-utils/src/getDisplayName.test.tsx     |   4 +-
 .../mui-utils/src/requirePropFactory.test.js  |   8 +-
 packages/mui-utils/src/useId.test.js          |  12 +-
 test/utils/until.test.js                      |  21 +-
 100 files changed, 1210 insertions(+), 946 deletions(-)

diff --git a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
index 17208cff2cbbdf..43e3ab9c5a988a 100644
--- a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
+++ b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
@@ -254,9 +254,7 @@ export default function MaterialUIComponents() {
                     Support in MUI X
                   </Link>
                 ) : null}
-                {component.materialUI === 'Composable' ? (
-                  <React.Fragment>{'Composable'}</React.Fragment>
-                ) : null}
+                {component.materialUI === 'Composable' ? 'Composable' : null}
                 {component.materialUI == null ? '❌ No support' : null}
               </TableCell>
             </TableRow>
diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js
index f964fa6da09333..8b1726dc09c258 100644
--- a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js
+++ b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js
@@ -8,7 +8,7 @@ describe('useAutocomplete', () => {
   const { render } = createRenderer();
 
   it('should preserve DOM nodes of options when re-ordering', () => {
-    const Test = (props) => {
+    function Test(props) {
       const { options } = props;
       const {
         groupedOptions,
@@ -37,7 +37,7 @@ describe('useAutocomplete', () => {
           ) : null}
         </div>
       );
-    };
+    }
 
     const { rerender } = render(<Test options={['foo', 'bar']} />);
     const [fooOptionAsFirst, barOptionAsSecond] = screen.getAllByRole('option');
@@ -235,7 +235,7 @@ describe('useAutocomplete', () => {
       this.skip();
     }
 
-    const Test = (props) => {
+    function Test(props) {
       const { options } = props;
       const {
         groupedOptions,
@@ -263,7 +263,7 @@ describe('useAutocomplete', () => {
           ) : null}
         </div>
       );
-    };
+    }
 
     const node16ErrorMessage =
       "Error: Uncaught [TypeError: Cannot read properties of null (reading 'removeAttribute')]";
@@ -299,12 +299,12 @@ describe('useAutocomplete', () => {
 
   describe('prop: freeSolo', () => {
     it('should not reset if the component value does not change on blur', () => {
-      const Test = (props) => {
+      function Test(props) {
         const { options } = props;
         const { getInputProps } = useAutocomplete({ options, open: true, freeSolo: true });
 
         return <input {...getInputProps()} />;
-      };
+      }
       render(<Test options={['foo', 'bar']} />);
       const input = screen.getByRole('combobox');
 
@@ -318,7 +318,7 @@ describe('useAutocomplete', () => {
   });
 
   it('should allow tuples or arrays as value when multiple=false', () => {
-    const Test = () => {
+    function Test() {
       const defaultValue = ['bar'];
 
       const { getClearProps, getInputProps } = useAutocomplete({
@@ -341,7 +341,7 @@ describe('useAutocomplete', () => {
           <button data-testid="button" {...getClearProps()} />;
         </div>
       );
-    };
+    }
 
     const { getByTestId } = render(<Test />);
 
diff --git a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx
index c4aa4d46ef96cc..f7dfc2fde9d499 100644
--- a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx
+++ b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx
@@ -24,7 +24,10 @@ const Badge = React.forwardRef(function Badge(
 const styledBadge = <BadgeUnstyled slots={{ root: Root, badge: Badge }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
index 9601799489cd9f..75b549d3bfbf41 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -24,7 +24,10 @@ function ButtonWithCustomRoot(props: ButtonUnstyledProps) {
 }
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/ButtonUnstyled/useButton.test.tsx b/packages/mui-base/src/ButtonUnstyled/useButton.test.tsx
index 4c03d3204eca97..18aebe3319c1ab 100644
--- a/packages/mui-base/src/ButtonUnstyled/useButton.test.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/useButton.test.tsx
@@ -10,12 +10,12 @@ describe('useButton', () => {
   describe('state: active', () => {
     describe('when using a button element', () => {
       it('is set when triggered by mouse', () => {
-        const TestComponent = () => {
+        function TestComponent() {
           const buttonRef = React.useRef(null);
           const { active, getRootProps } = useButton({ ref: buttonRef });
 
           return <button {...getRootProps()} className={active ? 'active' : ''} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         const button = getByRole('button');
@@ -26,12 +26,12 @@ describe('useButton', () => {
       });
 
       it('is set when triggered by keyboard', () => {
-        const TestComponent = () => {
+        function TestComponent() {
           const buttonRef = React.useRef(null);
           const { active, getRootProps } = useButton({ ref: buttonRef });
 
           return <button {...getRootProps()} className={active ? 'active' : ''} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         const button = getByRole('button');
@@ -45,12 +45,12 @@ describe('useButton', () => {
 
     describe('when using a span element', () => {
       it('is set when triggered by mouse', () => {
-        const TestComponent = () => {
+        function TestComponent() {
           const buttonRef = React.useRef(null);
           const { active, getRootProps } = useButton({ ref: buttonRef });
 
           return <span {...getRootProps()} className={active ? 'active' : ''} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         const button = getByRole('button');
@@ -61,12 +61,12 @@ describe('useButton', () => {
       });
 
       it('is set when triggered by keyboard', () => {
-        const TestComponent = () => {
+        function TestComponent() {
           const buttonRef = React.useRef(null);
           const { active, getRootProps } = useButton({ ref: buttonRef });
 
           return <span {...getRootProps()} className={active ? 'active' : ''} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         const button = getByRole('button');
@@ -84,11 +84,11 @@ describe('useButton', () => {
       }
 
       it('calls them when provided in props', () => {
-        const TestComponent = (props: WithClickHandler) => {
+        function TestComponent(props: WithClickHandler) {
           const ref = React.useRef(null);
           const { getRootProps } = useButton({ ...props, ref });
           return <button {...getRootProps()} />;
-        };
+        }
 
         const handleClick = spy();
 
@@ -101,11 +101,11 @@ describe('useButton', () => {
       it('calls them when provided in getRootProps()', () => {
         const handleClick = spy();
 
-        const TestComponent = () => {
+        function TestComponent() {
           const ref = React.useRef(null);
           const { getRootProps } = useButton({ ref });
           return <button {...getRootProps({ onClick: handleClick })} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         fireEvent.click(getByRole('button'));
@@ -117,11 +117,11 @@ describe('useButton', () => {
         const handleClickExternal = spy();
         const handleClickInternal = spy();
 
-        const TestComponent = (props: WithClickHandler) => {
+        function TestComponent(props: WithClickHandler) {
           const ref = React.useRef(null);
           const { getRootProps } = useButton({ ...props, ref });
           return <button {...getRootProps({ onClick: handleClickInternal })} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent onClick={handleClickExternal} />);
         fireEvent.click(getByRole('button'));
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.test.js b/packages/mui-base/src/FocusTrap/FocusTrap.test.js
index ec70b8b528ca3f..4bc53f663cebc8 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.test.js
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.test.js
@@ -368,16 +368,18 @@ describe('<FocusTrap />', () => {
       });
 
       it('should restore the focus', () => {
-        const Test = (props) => (
-          <div>
-            <input data-testid="outside-input" />
-            <FocusTrap open disableAutoFocus {...props}>
-              <div tabIndex={-1} data-testid="root">
-                <input data-testid="focus-input" />
-              </div>
-            </FocusTrap>
-          </div>
-        );
+        function Test(props) {
+          return (
+            <div>
+              <input data-testid="outside-input" />
+              <FocusTrap open disableAutoFocus {...props}>
+                <div tabIndex={-1} data-testid="root">
+                  <input data-testid="focus-input" />
+                </div>
+              </FocusTrap>
+            </div>
+          );
+        }
 
         const { setProps } = render(<Test />);
 
diff --git a/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.spec.tsx b/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.spec.tsx
index f2326aee4cf0b7..db8c951e7b817c 100644
--- a/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.spec.tsx
+++ b/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.spec.tsx
@@ -3,37 +3,42 @@ import FormControlUnstyled from '@mui/base/FormControlUnstyled';
 import { expectType } from '@mui/types';
 import { FormControlUnstyledRootSlotProps } from './FormControlUnstyled.types';
 
-const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
-
-const FormControlUnstyledTest = () => (
-  <div>
-    <FormControlUnstyled required />
-    {/* @ts-expect-error */}
-    <FormControlUnstyled invalidProp={0} />
-
-    <FormControlUnstyled component="a" href="#" />
-
-    <FormControlUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
-    {/* @ts-expect-error */}
-    <FormControlUnstyled component={CustomComponent} />
-
-    <FormControlUnstyled
-      component="button"
-      onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
-    />
-
-    <FormControlUnstyled<'button'>
-      component="button"
-      ref={(elem) => {
-        expectType<HTMLButtonElement | null, typeof elem>(elem);
-      }}
-      onClick={(e) => {
-        expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-        e.currentTarget.checkValidity();
-      }}
-    />
-  </div>
-);
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+function FormControlUnstyledTest() {
+  return (
+    <div>
+      <FormControlUnstyled required />
+      {/* @ts-expect-error */}
+      <FormControlUnstyled invalidProp={0} />
+
+      <FormControlUnstyled component="a" href="#" />
+
+      <FormControlUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
+      {/* @ts-expect-error */}
+      <FormControlUnstyled component={CustomComponent} />
+
+      <FormControlUnstyled
+        component="button"
+        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+      />
+
+      <FormControlUnstyled<'button'>
+        component="button"
+        ref={(elem) => {
+          expectType<HTMLButtonElement | null, typeof elem>(elem);
+        }}
+        onClick={(e) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
+          e.currentTarget.checkValidity();
+        }}
+      />
+    </div>
+  );
+}
 
 function Root(props: FormControlUnstyledRootSlotProps) {
   const { ownerState, children, ...other } = props;
diff --git a/packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx b/packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx
index a056432b43100b..7daed888c54df8 100644
--- a/packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx
+++ b/packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx
@@ -24,7 +24,10 @@ const InputInput = React.forwardRef(function InputInput(
 const styledInput = <InputUnstyled slots={{ root: InputRoot, input: InputInput }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/ListboxUnstyled/useControllableReducer.test.tsx b/packages/mui-base/src/ListboxUnstyled/useControllableReducer.test.tsx
index 532991dbe32ceb..ce24bc1f6cbdf7 100644
--- a/packages/mui-base/src/ListboxUnstyled/useControllableReducer.test.tsx
+++ b/packages/mui-base/src/ListboxUnstyled/useControllableReducer.test.tsx
@@ -21,7 +21,7 @@ describe('useControllableReducer', () => {
       });
 
       const actionToDispatch = { type: ActionTypes.setValue as const, value: 'b', event: null };
-      const TestComponent = () => {
+      function TestComponent() {
         const props: UseListboxPropsWithDefaults<string> = {
           options: ['a', 'b', 'c'],
           defaultValue: 'a',
@@ -35,7 +35,7 @@ describe('useControllableReducer', () => {
         const [, dispatch] = useControllableReducer(reducer, undefined, props);
         React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
         return null;
-      };
+      }
 
       render(<TestComponent />);
       expect(reducer.getCalls()[0].args[1]).to.equal(actionToDispatch);
@@ -53,7 +53,7 @@ describe('useControllableReducer', () => {
       });
 
       const actionToDispatch = { type: ActionTypes.setValue as const, value: 'b', event: null };
-      const TestComponent = () => {
+      function TestComponent() {
         const props: UseListboxPropsWithDefaults<string> = {
           options: ['a', 'b', 'c'],
           defaultValue: 'a',
@@ -67,7 +67,7 @@ describe('useControllableReducer', () => {
         const [, dispatch] = useControllableReducer(internalReducer, externalReducer, props);
         React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
         return null;
-      };
+      }
 
       render(<TestComponent />);
       expect(internalReducer.notCalled).to.equal(true);
@@ -86,7 +86,7 @@ describe('useControllableReducer', () => {
       const handleChange = spy();
       const handleHighlightChange = spy();
 
-      const TestComponent = () => {
+      function TestComponent() {
         const props: UseListboxPropsWithDefaults<string> = {
           options: ['a', 'b', 'c'],
           defaultValue: 'a',
@@ -102,7 +102,7 @@ describe('useControllableReducer', () => {
         const [, dispatch] = useControllableReducer(reducer, undefined, props);
         React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
         return null;
-      };
+      }
 
       render(<TestComponent />);
       expect(handleChange.getCalls()[0].args[1]).to.equal('b');
@@ -125,7 +125,7 @@ describe('useControllableReducer', () => {
       const handleChange = spy();
       const handleHighlightChange = spy();
 
-      const TestComponent = () => {
+      function TestComponent() {
         const props: UseListboxPropsWithDefaults<string> = {
           options: ['a', 'b', 'c'],
           defaultValue: 'a',
@@ -141,7 +141,7 @@ describe('useControllableReducer', () => {
         const [, dispatch] = useControllableReducer(reducer, undefined, props);
         React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
         return null;
-      };
+      }
 
       render(<TestComponent />);
       expect(handleHighlightChange.getCalls()[0].args[1]).to.equal('b');
diff --git a/packages/mui-base/src/ListboxUnstyled/useListbox.test.tsx b/packages/mui-base/src/ListboxUnstyled/useListbox.test.tsx
index f3109b79987bb1..f4694afba64b08 100644
--- a/packages/mui-base/src/ListboxUnstyled/useListbox.test.tsx
+++ b/packages/mui-base/src/ListboxUnstyled/useListbox.test.tsx
@@ -8,10 +8,10 @@ describe('useListbox', () => {
   const { render } = createRenderer();
   describe('prop: id', () => {
     it('propagates it to the root element', () => {
-      const Listbox = () => {
+      function Listbox() {
         const { getRootProps } = useListbox({ options: [], id: 'test-id' });
         return <ul {...getRootProps()} />;
-      };
+      }
       const { getByRole } = render(<Listbox />);
 
       const listbox = getByRole('listbox');
@@ -20,7 +20,7 @@ describe('useListbox', () => {
 
     it('uses the provided id to create option ids', () => {
       const options = ['one', 'two'];
-      const Listbox = () => {
+      function Listbox() {
         const { getRootProps, getOptionProps } = useListbox({ options, id: 'test-id' });
         return (
           <ul {...getRootProps()}>
@@ -31,7 +31,7 @@ describe('useListbox', () => {
             ))}
           </ul>
         );
-      };
+      }
       const { getAllByRole } = render(<Listbox />);
 
       const optionElements = getAllByRole('option');
@@ -41,10 +41,10 @@ describe('useListbox', () => {
     });
 
     it('generates a unique id if not provided explicitly', () => {
-      const Listbox = () => {
+      function Listbox() {
         const { getRootProps } = useListbox({ options: [] });
         return <ul {...getRootProps()} />;
-      };
+      }
 
       const { getAllByRole } = render(
         <React.Fragment>
@@ -61,10 +61,10 @@ describe('useListbox', () => {
   describe('preventing default behavior on keyDown', () => {
     ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown', 'Enter', ' '].forEach((key) =>
       it(`prevents default behavior when ${key} is pressed in activeDescendant focus management mode`, () => {
-        const Listbox = () => {
+        function Listbox() {
           const { getRootProps } = useListbox({ options: [], focusManagement: 'activeDescendant' });
           return <div {...getRootProps()} />;
-        };
+        }
 
         const { getByRole } = render(<Listbox />);
         const listbox = getByRole('listbox');
@@ -83,10 +83,10 @@ describe('useListbox', () => {
 
     ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].forEach((key) =>
       it(`prevents default behavior when ${key} is pressed in DOM focus management mode`, () => {
-        const Listbox = () => {
+        function Listbox() {
           const { getRootProps } = useListbox({ options: [], focusManagement: 'DOM' });
           return <div {...getRootProps()} />;
-        };
+        }
 
         const { getByRole } = render(<Listbox />);
         const listbox = getByRole('listbox');
@@ -105,10 +105,10 @@ describe('useListbox', () => {
 
     ['Enter', ' '].forEach((key) =>
       it(`does not prevent default behavior when ${key} is pressed in DOM focus management mode`, () => {
-        const Listbox = () => {
+        function Listbox() {
           const { getRootProps } = useListbox({ options: [], focusManagement: 'DOM' });
           return <div {...getRootProps()} />;
-        };
+        }
 
         const { getByRole } = render(<Listbox />);
         const listbox = getByRole('listbox');
diff --git a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.spec.tsx b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.spec.tsx
index 30c390cb2ee602..66795d88652ff6 100644
--- a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.spec.tsx
+++ b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.spec.tsx
@@ -3,7 +3,10 @@ import { expectType } from '@mui/types';
 import MenuItemUnstyled from '@mui/base/MenuItemUnstyled';
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.spec.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.spec.tsx
index 57ed20f7669cb3..2c822c2199315f 100644
--- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.spec.tsx
+++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.spec.tsx
@@ -3,7 +3,10 @@ import { expectType } from '@mui/types';
 import MenuUnstyled from '@mui/base/MenuUnstyled';
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.spec.tsx b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.spec.tsx
index d0ee09d2efa2e2..e8a0b4e329d998 100644
--- a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.spec.tsx
+++ b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.spec.tsx
@@ -22,7 +22,10 @@ const styledModal = (
 );
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.spec.tsx b/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.spec.tsx
index c4737b70af4b87..baeb8dd89932f0 100644
--- a/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.spec.tsx
+++ b/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.spec.tsx
@@ -78,7 +78,10 @@ const MultiSelectUnstyledComponentsOverridesUsingHostComponentTest = (
 );
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.spec.tsx b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.spec.tsx
index 1d31617324426e..c8ffad8d41de40 100644
--- a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.spec.tsx
+++ b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.spec.tsx
@@ -30,7 +30,10 @@ const List = React.forwardRef(function List(
 const option = <OptionGroupUnstyled slots={{ root: Root, label: Label, list: List }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx
index e3d342379479d9..9a4dbd59179c05 100644
--- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx
+++ b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx
@@ -14,7 +14,10 @@ const Root = React.forwardRef(function Root<TValue>(
 const option = <OptionUnstyled value={null} slots={{ root: Root }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.spec.tsx b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.spec.tsx
index 0db0fb57fa0cec..a1f973d3f9b458 100644
--- a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.spec.tsx
+++ b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.spec.tsx
@@ -10,7 +10,10 @@ function Root(props: PopperUnstyledRootSlotProps) {
 const styledPopper = <PopperUnstyled slots={{ root: Root }} open />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx
index f003f447df6eaa..50ba1a84f459dc 100644
--- a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx
+++ b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx
@@ -78,7 +78,10 @@ const SelectUnstyledComponentsOverridesUsingHostComponentTest = (
 );
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx
index 80510fb00826ea..c8377d2e2c102c 100644
--- a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx
+++ b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx
@@ -183,17 +183,19 @@ describe('SelectUnstyled', () => {
       });
 
       it('navigate using the label prop', () => {
-        const RichOption = (props: OptionUnstyledProps<number>) => (
-          <OptionUnstyled {...props}>
-            <div>
-              Option Title
+        function RichOption(props: OptionUnstyledProps<number>) {
+          return (
+            <OptionUnstyled {...props}>
               <div>
-                Nested information
-                <p>{props.label || props.value}</p>
+                Option Title
+                <div>
+                  Nested information
+                  <p>{props.label || props.value}</p>
+                </div>
               </div>
-            </div>
-          </OptionUnstyled>
-        );
+            </OptionUnstyled>
+          );
+        }
 
         const { getByRole, getByTestId } = render(
           <SelectUnstyled>
diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.spec.tsx b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.spec.tsx
index 564be2c6a9ab36..60f5323bce78ea 100644
--- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.spec.tsx
+++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.spec.tsx
@@ -82,7 +82,10 @@ const styledSlider = (
 );
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.spec.tsx b/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.spec.tsx
index cd799c3c2d1cd3..eee2dd3f0b9af9 100644
--- a/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.spec.tsx
+++ b/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.spec.tsx
@@ -15,6 +15,6 @@ const Root = React.forwardRef(
   },
 );
 
-const SnackbarUnstyledWithCustomRoot = (props: SnackbarUnstyledProps) => {
+function SnackbarUnstyledWithCustomRoot(props: SnackbarUnstyledProps) {
   return <SnackbarUnstyled {...props} slots={{ root: Root }} />;
-};
+}
diff --git a/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.spec.tsx b/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.spec.tsx
index 5dd129fcbf2d99..5aba8abae7df1a 100644
--- a/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.spec.tsx
+++ b/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.spec.tsx
@@ -44,7 +44,10 @@ const styledSwitch = (
 );
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.spec.tsx b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.spec.tsx
index f8fa3b7a3b910d..a97687566e0ae0 100644
--- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.spec.tsx
+++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.spec.tsx
@@ -10,7 +10,10 @@ function Root(props: TabPanelUnstyledRootSlotProps) {
 const styledTabPanel = <TabPanelUnstyled slots={{ root: Root }} value={0} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx
index 02a4aad95bfaef..a093230a9ac0c6 100644
--- a/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx
+++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx
@@ -10,7 +10,10 @@ function Root(props: TabUnstyledRootSlotProps) {
 const styledTab = <TabUnstyled slots={{ root: Root }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.spec.tsx b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.spec.tsx
index 3263e323883136..a4966244658c6b 100644
--- a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.spec.tsx
+++ b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.spec.tsx
@@ -36,7 +36,10 @@ const styledTablePaginationActions = (
 );
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   const requiredProps = {
     count: 10,
diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.test.tsx b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.test.tsx
index ae9a6351ce18d2..2c82060adfcb54 100644
--- a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.test.tsx
+++ b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.test.tsx
@@ -294,7 +294,7 @@ describe('<TablePaginationUnstyled />', () => {
 
   describe('prop: count=-1', () => {
     it('should display the "of more than" text and keep the nextButton enabled', () => {
-      const Test = () => {
+      function Test() {
         const [page, setPage] = React.useState(0);
         return (
           <table>
@@ -317,7 +317,7 @@ describe('<TablePaginationUnstyled />', () => {
             </TableFooter>
           </table>
         );
-      };
+      }
 
       const { getByRole, getByTestId } = render(<Test />);
 
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.spec.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.spec.tsx
index c9157170af5b65..d19530e6285b90 100644
--- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.spec.tsx
+++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.spec.tsx
@@ -10,7 +10,10 @@ function Root(props: TabsListUnstyledRootSlotProps) {
 const styledTabsList = <TabsListUnstyled slots={{ root: Root }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.spec.tsx b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.spec.tsx
index b8b9de99bd9e5a..f7a764049c7279 100644
--- a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.spec.tsx
+++ b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.spec.tsx
@@ -10,7 +10,10 @@ function Root(props: TabsUnstyledRootSlotProps) {
 const styledTabs = <TabsUnstyled slots={{ root: Root }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>
diff --git a/packages/mui-base/src/utils/appendOwnerState.test.ts b/packages/mui-base/src/utils/appendOwnerState.test.ts
index d4cd90e883cf0c..f775075b503010 100644
--- a/packages/mui-base/src/utils/appendOwnerState.test.ts
+++ b/packages/mui-base/src/utils/appendOwnerState.test.ts
@@ -6,7 +6,9 @@ const ownerState = {
   checked: true,
 };
 
-const CustomComponent = () => null;
+function CustomComponent() {
+  return null;
+}
 
 describe('appendOwnerState', () => {
   describe('when a DOM element is provided as elementType', () => {
diff --git a/packages/mui-base/src/utils/useSlotProps.test.tsx b/packages/mui-base/src/utils/useSlotProps.test.tsx
index 6ba5e15bc1117b..aff10466c14a43 100644
--- a/packages/mui-base/src/utils/useSlotProps.test.tsx
+++ b/packages/mui-base/src/utils/useSlotProps.test.tsx
@@ -107,7 +107,9 @@ describe('useSlotProps', () => {
       id: 'test',
     });
 
-    const TestComponent = (props: any) => <div {...props} />;
+    function TestComponent(props: any) {
+      return <div {...props} />;
+    }
 
     const result = callUseSlotProps({
       elementType: TestComponent,
@@ -207,7 +209,9 @@ describe('useSlotProps', () => {
       ref: additionalRef,
     };
 
-    const TestComponent = (props: any) => <div {...props} />;
+    function TestComponent(props: any) {
+      return <div {...props} />;
+    }
 
     const result = callUseSlotProps({
       elementType: TestComponent,
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.test.js b/packages/mui-joy/src/MenuItem/MenuItem.test.js
index e3fa6623c11482..9ddb0782e50ea7 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.test.js
+++ b/packages/mui-joy/src/MenuItem/MenuItem.test.js
@@ -20,9 +20,11 @@ const testContext = {
   open: false,
 };
 
-const Wrapper = ({ children }) => (
-  <MenuUnstyledContext.Provider value={testContext}>{children}</MenuUnstyledContext.Provider>
-);
+function Wrapper({ children }) {
+  return (
+    <MenuUnstyledContext.Provider value={testContext}>{children}</MenuUnstyledContext.Provider>
+  );
+}
 
 describe('Joy <MenuItem />', () => {
   const { render: baseRender } = createRenderer();
diff --git a/packages/mui-joy/src/Modal/Modal.test.tsx b/packages/mui-joy/src/Modal/Modal.test.tsx
index 757b28f9d2edf8..0a5a9b4d889655 100644
--- a/packages/mui-joy/src/Modal/Modal.test.tsx
+++ b/packages/mui-joy/src/Modal/Modal.test.tsx
@@ -446,16 +446,18 @@ describe('<Modal />', () => {
     clock.withFakeTimers();
 
     it('should open and close', () => {
-      const TestCase = (props: { open: boolean }) => (
-        <React.Fragment>
-          <Modal open={props.open}>
-            <div>Hello</div>
-          </Modal>
-          <Modal open={props.open}>
-            <div>World</div>
-          </Modal>
-        </React.Fragment>
-      );
+      function TestCase(props: { open: boolean }) {
+        return (
+          <React.Fragment>
+            <Modal open={props.open}>
+              <div>Hello</div>
+            </Modal>
+            <Modal open={props.open}>
+              <div>World</div>
+            </Modal>
+          </React.Fragment>
+        );
+      }
 
       const { setProps } = render(<TestCase open={false} />);
 
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.spec.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.spec.tsx
index 37d2e5da01aeec..0f3cb763b7eee5 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.spec.tsx
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.spec.tsx
@@ -1,7 +1,9 @@
 import SvgIcon from '@mui/joy/SvgIcon';
 import * as React from 'react';
 
-const HomeIcon = () => <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />;
+function HomeIcon() {
+  return <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />;
+}
 
 <SvgIcon>
   <HomeIcon />
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.test.js b/packages/mui-joy/src/SvgIcon/SvgIcon.test.js
index d638dd3fd805d5..2b531674551f82 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.test.js
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.test.js
@@ -108,11 +108,13 @@ describe('<SvgIcon />', () => {
   });
 
   describe('prop: inheritViewBox', () => {
-    const CustomSvg = (props) => (
-      <svg viewBox="-4 -4 24 24" {...props}>
-        {path}
-      </svg>
-    );
+    function CustomSvg(props) {
+      return (
+        <svg viewBox="-4 -4 24 24" {...props}>
+          {path}
+        </svg>
+      );
+    }
 
     it('should render with the default viewBox if neither inheritViewBox nor viewBox are provided', () => {
       const { container } = render(<SvgIcon component={CustomSvg} />);
diff --git a/packages/mui-joy/src/Tab/Tab.test.tsx b/packages/mui-joy/src/Tab/Tab.test.tsx
index c131df1ce5ad38..b1eb018ef31e3f 100644
--- a/packages/mui-joy/src/Tab/Tab.test.tsx
+++ b/packages/mui-joy/src/Tab/Tab.test.tsx
@@ -5,10 +5,10 @@ import { TabsContext, useTabs, TabsUnstyledProps } from '@mui/base/TabsUnstyled'
 import { ThemeProvider } from '@mui/joy/styles';
 import Tab, { tabClasses as classes } from '@mui/joy/Tab';
 
-const TabsProvider = ({ children, ...props }: TabsUnstyledProps) => {
+function TabsProvider({ children, ...props }: TabsUnstyledProps) {
   const { tabsContextValue } = useTabs(props);
   return <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>;
-};
+}
 
 describe('Joy <Tab />', () => {
   const { render } = createRenderer();
diff --git a/packages/mui-joy/src/TabList/TabList.test.tsx b/packages/mui-joy/src/TabList/TabList.test.tsx
index e0d2f07bf1205f..da319153b72610 100644
--- a/packages/mui-joy/src/TabList/TabList.test.tsx
+++ b/packages/mui-joy/src/TabList/TabList.test.tsx
@@ -7,10 +7,10 @@ import Tabs from '@mui/joy/Tabs';
 import TabList, { tabListClasses as classes } from '@mui/joy/TabList';
 import RowListContext from '../List/RowListContext';
 
-const TabsProvider = ({ children, ...props }: TabsUnstyledProps) => {
+function TabsProvider({ children, ...props }: TabsUnstyledProps) {
   const { tabsContextValue } = useTabs(props);
   return <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>;
-};
+}
 
 describe('Joy <TabList />', () => {
   const { render } = createRenderer();
@@ -78,10 +78,10 @@ describe('Joy <TabList />', () => {
   });
 
   it('provides the correct value to RowListContext', () => {
-    const TabItem = () => {
+    function TabItem() {
       const row = React.useContext(RowListContext);
       return <div>{row ? 'horizontal' : 'vertical'}</div>;
-    };
+    }
     render(
       <Tabs orientation="vertical">
         <TabList>
diff --git a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
index 41eb41865b56dc..008e12c15125e1 100644
--- a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
@@ -6,10 +6,10 @@ import { ThemeProvider } from '@mui/joy/styles';
 import Tabs from '@mui/joy/Tabs';
 import TabPanel, { tabPanelClasses as classes } from '@mui/joy/TabPanel';
 
-const TabsProvider = ({ children, ...props }: TabsUnstyledProps) => {
+function TabsProvider({ children, ...props }: TabsUnstyledProps) {
   const { tabsContextValue } = useTabs(props);
   return <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>;
-};
+}
 
 describe('Joy <TabPanel />', () => {
   const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Tabs/Tabs.test.tsx b/packages/mui-joy/src/Tabs/Tabs.test.tsx
index 48fcaf101fd2e7..c70cdde9ef1fb4 100644
--- a/packages/mui-joy/src/Tabs/Tabs.test.tsx
+++ b/packages/mui-joy/src/Tabs/Tabs.test.tsx
@@ -31,10 +31,10 @@ describe('Joy <Tabs />', () => {
   });
 
   it('prop: size, send the value through context', () => {
-    const Child = () => {
+    function Child() {
       const size = React.useContext(SizeTabsContext);
       return <div>{size}</div>;
-    };
+    }
     render(
       <Tabs size="sm">
         <Child />
diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
index ddd6a1921d51bf..b5cfd03ba47e80 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
@@ -51,7 +51,7 @@ describe('[Joy] CssVarsProvider', () => {
 
   describe('All CSS vars', () => {
     it('palette', () => {
-      const Vars = () => {
+      function Vars() {
         const theme = useTheme();
         return (
           <div>
@@ -70,7 +70,7 @@ describe('[Joy] CssVarsProvider', () => {
             </div>
           </div>
         );
-      };
+      }
 
       render(
         <CssVarsProvider>
@@ -345,7 +345,7 @@ describe('[Joy] CssVarsProvider', () => {
     });
 
     it('font', () => {
-      const Vars = () => {
+      function Vars() {
         const theme = useTheme();
         return (
           <div>
@@ -356,7 +356,7 @@ describe('[Joy] CssVarsProvider', () => {
             <div data-testid="letter-spacing">{JSON.stringify(theme.vars.letterSpacing)}</div>
           </div>
         );
-      };
+      }
 
       render(
         <CssVarsProvider>
@@ -417,14 +417,14 @@ describe('[Joy] CssVarsProvider', () => {
     });
 
     it('shape', () => {
-      const Vars = () => {
+      function Vars() {
         const theme = useTheme();
         return (
           <div>
             <div data-testid="radius">{JSON.stringify(theme.vars.radius)}</div>
           </div>
         );
-      };
+      }
 
       render(
         <CssVarsProvider>
@@ -444,7 +444,7 @@ describe('[Joy] CssVarsProvider', () => {
     });
 
     it('shadow ring & channel', () => {
-      const Vars = () => {
+      function Vars() {
         const theme = useTheme();
         return (
           <div>
@@ -452,7 +452,7 @@ describe('[Joy] CssVarsProvider', () => {
             <div data-testid="shadow-channel">{theme.vars.shadowChannel}</div>
           </div>
         );
-      };
+      }
 
       render(
         <CssVarsProvider>
@@ -467,10 +467,10 @@ describe('[Joy] CssVarsProvider', () => {
 
   describe('Focus', () => {
     it('contain expected focus', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{Object.keys(theme.focus).join(',')}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -484,10 +484,10 @@ describe('[Joy] CssVarsProvider', () => {
 
   describe('Typography', () => {
     it('contain expected typography', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{Object.keys(theme.typography).join(',')}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -503,10 +503,10 @@ describe('[Joy] CssVarsProvider', () => {
 
   describe('Variant', () => {
     it('contain expected variants', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{Object.keys(theme.variants).join(',')}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -554,10 +554,10 @@ describe('[Joy] CssVarsProvider', () => {
 
   describe('Spacing', () => {
     it('provides spacing utility', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{theme.spacing(2)}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -571,10 +571,10 @@ describe('[Joy] CssVarsProvider', () => {
 
   describe('Breakpoints', () => {
     it('provides breakpoint utilities', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{theme.breakpoints.up('sm')}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -588,11 +588,11 @@ describe('[Joy] CssVarsProvider', () => {
 
   describe('Skipped vars', () => {
     it('should not contain `variants` in theme.vars', () => {
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         // @ts-expect-error
         return <div>{theme.vars.variants ? 'variants' : ''}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -604,11 +604,11 @@ describe('[Joy] CssVarsProvider', () => {
     });
 
     it('should not contain `typography` in theme.vars', () => {
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         // @ts-expect-error
         return <div>{theme.vars.typography ? 'typography' : ''}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -620,10 +620,10 @@ describe('[Joy] CssVarsProvider', () => {
     });
 
     it('should contain only `focus.thickness` in theme.vars', () => {
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         return <div>{JSON.stringify(theme.vars.focus)}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
diff --git a/packages/mui-joy/src/styles/ThemeProvider.test.tsx b/packages/mui-joy/src/styles/ThemeProvider.test.tsx
index e8746202695149..2696c3152c6ec1 100644
--- a/packages/mui-joy/src/styles/ThemeProvider.test.tsx
+++ b/packages/mui-joy/src/styles/ThemeProvider.test.tsx
@@ -7,10 +7,10 @@ import defaultTheme from './defaultTheme';
 describe('[Joy] ThemeProvider', () => {
   const { render } = createRenderer();
   it('can render component without ThemeProvider', () => {
-    const Text = () => {
+    function Text() {
       const theme = useTheme();
       return <div>{theme.fontSize.md}</div>;
-    };
+    }
 
     const { container } = render(<Text />);
 
@@ -18,10 +18,10 @@ describe('[Joy] ThemeProvider', () => {
   });
 
   it('merge custom theme and apply to vars', () => {
-    const Text = () => {
+    function Text() {
       const theme = useTheme();
       return <div>{theme.vars.fontSize.md}</div>;
-    };
+    }
     const { container } = render(
       <ThemeProvider theme={{ fontSize: { md: '100rem' } }}>
         <Text />
diff --git a/packages/mui-lab/src/TreeView/TreeView.test.js b/packages/mui-lab/src/TreeView/TreeView.test.js
index 359ae90f573cc4..7916cd7fad0735 100644
--- a/packages/mui-lab/src/TreeView/TreeView.test.js
+++ b/packages/mui-lab/src/TreeView/TreeView.test.js
@@ -94,9 +94,9 @@ describe('<TreeView />', () => {
     });
 
     it('should not crash when unmounting with duplicate ids', () => {
-      const CustomTreeItem = () => {
+      function CustomTreeItem() {
         return <TreeItem nodeId="iojerogj" />;
-      };
+      }
       function App() {
         const [isVisible, hideTreeView] = React.useReducer(() => false, true);
 
diff --git a/packages/mui-material-next/src/Button/Button.spec.tsx b/packages/mui-material-next/src/Button/Button.spec.tsx
index b1ff4e45f52344..f5a06dce04dd3d 100644
--- a/packages/mui-material-next/src/Button/Button.spec.tsx
+++ b/packages/mui-material-next/src/Button/Button.spec.tsx
@@ -86,9 +86,9 @@ const buttonTest = () => (
 );
 
 const ReactRouterLinkTest = () => {
-  const ButtonLink = (props: ButtonProps<typeof ReactRouterLink>) => (
-    <Button {...props} component={ReactRouterLink} />
-  );
+  function ButtonLink(props: ButtonProps<typeof ReactRouterLink>) {
+    return <Button {...props} component={ReactRouterLink} />;
+  }
 
   const reactRouterButtonLink1 = <ButtonLink to="/">Go Home</ButtonLink>;
 
diff --git a/packages/mui-material-next/src/TablePagination/TablePagination.test.js b/packages/mui-material-next/src/TablePagination/TablePagination.test.js
index 05927de47daf67..e3052bb9bbe3ab 100644
--- a/packages/mui-material-next/src/TablePagination/TablePagination.test.js
+++ b/packages/mui-material-next/src/TablePagination/TablePagination.test.js
@@ -276,7 +276,7 @@ describe('<TablePagination />', () => {
 
   describe('prop: count=-1', () => {
     it('should display the "of more than" text and keep the nextButton enabled', () => {
-      const Test = () => {
+      function Test() {
         const [page, setPage] = React.useState(0);
         return (
           <table>
@@ -294,7 +294,7 @@ describe('<TablePagination />', () => {
             </TableFooter>
           </table>
         );
-      };
+      }
 
       const { container, getByRole } = render(<Test />);
 
diff --git a/packages/mui-material/src/Accordion/Accordion.test.js b/packages/mui-material/src/Accordion/Accordion.test.js
index 48b4a2fab11738..a09599da74828e 100644
--- a/packages/mui-material/src/Accordion/Accordion.test.js
+++ b/packages/mui-material/src/Accordion/Accordion.test.js
@@ -105,15 +105,17 @@ describe('<Accordion />', () => {
   });
 
   it('should handle the TransitionComponent prop', () => {
-    const NoTransitionCollapse = (props) => {
+    function NoTransitionCollapse(props) {
       return props.in ? <div>{props.children}</div> : null;
-    };
+    }
     NoTransitionCollapse.propTypes = {
       children: PropTypes.node,
       in: PropTypes.bool,
     };
 
-    const CustomContent = () => <div>Hello</div>;
+    function CustomContent() {
+      return <div>Hello</div>;
+    }
     const { queryByText, getByText, setProps } = render(
       <Accordion expanded TransitionComponent={NoTransitionCollapse}>
         <AccordionSummary />
@@ -165,7 +167,10 @@ describe('<Accordion />', () => {
         expect(() => {
           PropTypes.checkPropTypes(
             Accordion.propTypes,
-            { classes: {}, children: <React.Fragment /> },
+            {
+              classes: {},
+              children: <React.Fragment />,
+            },
             'prop',
             'MockedName',
           );
diff --git a/packages/mui-material/src/Alert/Alert.test.js b/packages/mui-material/src/Alert/Alert.test.js
index 8c9b65ef3e98be..cecd3619b94a4e 100644
--- a/packages/mui-material/src/Alert/Alert.test.js
+++ b/packages/mui-material/src/Alert/Alert.test.js
@@ -73,7 +73,9 @@ describe('<Alert />', () => {
 
   describe('prop: components', () => {
     it('should override the default icon used in the close action', () => {
-      const MyCloseIcon = () => <div data-testid="closeIcon">X</div>;
+      function MyCloseIcon() {
+        return <div data-testid="closeIcon">X</div>;
+      }
 
       render(
         <Alert onClose={() => {}} components={{ CloseIcon: MyCloseIcon }}>
@@ -85,7 +87,9 @@ describe('<Alert />', () => {
     });
 
     it('should override the default button used in the close action', () => {
-      const MyCloseButton = () => <button data-testid="closeButton">X</button>;
+      function MyCloseButton() {
+        return <button data-testid="closeButton">X</button>;
+      }
 
       render(
         <Alert onClose={() => {}} components={{ CloseButton: MyCloseButton }}>
diff --git a/packages/mui-material/src/AppBar/AppBar.spec.tsx b/packages/mui-material/src/AppBar/AppBar.spec.tsx
index 9afb473eea8a94..8600ddcd018553 100644
--- a/packages/mui-material/src/AppBar/AppBar.spec.tsx
+++ b/packages/mui-material/src/AppBar/AppBar.spec.tsx
@@ -1,16 +1,21 @@
 import * as React from 'react';
 import AppBar from '@mui/material/AppBar';
 
-const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
 
-const AppBarTest = () => (
-  <div>
-    <AppBar />
-    <AppBar elevation={4} />
+function AppBarTest() {
+  return (
+    <div>
+      <AppBar />
+      <AppBar elevation={4} />
 
-    <AppBar component="a" href="test" />
-    <AppBar component={CustomComponent} stringProp="test" numberProp={0} />
-    {/* @ts-expect-error missing stringProp and numberProp */}
-    <AppBar component={CustomComponent} />
-  </div>
-);
+      <AppBar component="a" href="test" />
+      <AppBar component={CustomComponent} stringProp="test" numberProp={0} />
+      {/* @ts-expect-error missing stringProp and numberProp */}
+      <AppBar component={CustomComponent} />
+    </div>
+  );
+}
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
index 5fd0a39c0177ce..d2f6ab028c9040 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
@@ -71,9 +71,9 @@ interface Tag {
   label: string;
 }
 type TagComponentProps = Tag & React.HTMLAttributes<HTMLDivElement>;
-const TagComponent = ({ color, label, ...other }: TagComponentProps) => (
-  <div {...other}>{label}</div>
-);
+function TagComponent({ color, label, ...other }: TagComponentProps) {
+  return <div {...other}>{label}</div>;
+}
 
 function renderTags(value: Tag[], getTagProps: AutocompleteRenderGetTagProps) {
   return value.map((tag: Tag, index) => {
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 2fd224e79b018c..4ab7e72c573b00 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -648,21 +648,23 @@ describe('<Autocomplete />', () => {
 
   it('should trigger a form expectedly', () => {
     const handleSubmit = spy();
-    const Test = (props) => (
-      <div
-        onKeyDown={(event) => {
-          if (!event.defaultPrevented && event.key === 'Enter') {
-            handleSubmit();
-          }
-        }}
-      >
-        <Autocomplete
-          options={['one', 'two']}
-          renderInput={(props2) => <TextField {...props2} autoFocus />}
-          {...props}
-        />
-      </div>
-    );
+    function Test(props) {
+      return (
+        <div
+          onKeyDown={(event) => {
+            if (!event.defaultPrevented && event.key === 'Enter') {
+              handleSubmit();
+            }
+          }}
+        >
+          <Autocomplete
+            options={['one', 'two']}
+            renderInput={(props2) => <TextField {...props2} autoFocus />}
+            {...props}
+          />
+        </div>
+      );
+    }
     const { setProps } = render(<Test />);
     let textbox = screen.getByRole('combobox');
 
@@ -2430,26 +2432,28 @@ describe('<Autocomplete />', () => {
   it('should prevent the default event handlers', () => {
     const handleChange = spy();
     const handleSubmit = spy();
-    const Test = () => (
-      <div
-        onKeyDown={(event) => {
-          if (!event.defaultPrevented && event.key === 'Enter') {
-            handleSubmit();
-          }
-        }}
-      >
-        <Autocomplete
-          options={['one', 'two']}
-          onChange={handleChange}
+    function Test() {
+      return (
+        <div
           onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.defaultMuiPrevented = true;
+            if (!event.defaultPrevented && event.key === 'Enter') {
+              handleSubmit();
             }
           }}
-          renderInput={(params) => <TextField autoFocus {...params} />}
-        />
-      </div>
-    );
+        >
+          <Autocomplete
+            options={['one', 'two']}
+            onChange={handleChange}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.defaultMuiPrevented = true;
+              }
+            }}
+            renderInput={(params) => <TextField autoFocus {...params} />}
+          />
+        </div>
+      );
+    }
     render(<Test />);
     const textbox = screen.getByRole('combobox');
     fireEvent.keyDown(textbox, { key: 'ArrowDown' });
diff --git a/packages/mui-material/src/Button/Button.spec.tsx b/packages/mui-material/src/Button/Button.spec.tsx
index e13daf6220fe9a..1250869cfb83d9 100644
--- a/packages/mui-material/src/Button/Button.spec.tsx
+++ b/packages/mui-material/src/Button/Button.spec.tsx
@@ -9,7 +9,9 @@ const TestOverride = React.forwardRef<HTMLDivElement, { x?: number }>((props, re
   <div ref={ref} />
 ));
 
-const FakeIcon = () => <div>Icon</div>;
+function FakeIcon() {
+  return <div>Icon</div>;
+}
 
 const buttonTest = () => (
   <div>
@@ -86,9 +88,9 @@ const buttonTest = () => (
 );
 
 const ReactRouterLinkTest = () => {
-  const ButtonLink = (props: ButtonProps<typeof ReactRouterLink>) => (
-    <Button {...props} component={ReactRouterLink} />
-  );
+  function ButtonLink(props: ButtonProps<typeof ReactRouterLink>) {
+    return <Button {...props} component={ReactRouterLink} />;
+  }
 
   const reactRouterButtonLink1 = <ButtonLink to="/">Go Home</ButtonLink>;
 
diff --git a/packages/mui-material/src/CardHeader/CardHeader.spec.tsx b/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
index 00569c192c714c..8bce33b41c52b3 100644
--- a/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
+++ b/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import CardHeader, { CardHeaderProps, CardHeaderTypeMap } from '@mui/material/CardHeader';
 
-const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
 
 type DefaultComponent = CardHeaderTypeMap['defaultComponent'];
 
diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js
index c078350acb38ed..fb95a10e3e6f64 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.test.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.test.js
@@ -114,7 +114,7 @@ describe('<Checkbox />', () => {
 
   it('should allow custom icon font sizes', () => {
     const fontSizeSpy = spy();
-    const MyIcon = (props) => {
+    function MyIcon(props) {
       const { fontSize, ...other } = props;
 
       React.useEffect(() => {
@@ -122,7 +122,7 @@ describe('<Checkbox />', () => {
       });
 
       return <div {...other} />;
-    };
+    }
     render(<Checkbox icon={<MyIcon fontSize="foo" />} />);
 
     expect(fontSizeSpy.args[0][0]).to.equal('foo');
diff --git a/packages/mui-material/src/Collapse/Collapse.test.js b/packages/mui-material/src/Collapse/Collapse.test.js
index e703d6520ce295..2a9375ade7c534 100644
--- a/packages/mui-material/src/Collapse/Collapse.test.js
+++ b/packages/mui-material/src/Collapse/Collapse.test.js
@@ -145,13 +145,15 @@ describe('<Collapse />', () => {
       });
 
       const next1 = spy();
-      const Test = (props) => (
-        <ThemeProvider theme={theme}>
-          <Collapse timeout="auto" onEntered={next1} {...props}>
-            <div />
-          </Collapse>
-        </ThemeProvider>
-      );
+      function Test(props) {
+        return (
+          <ThemeProvider theme={theme}>
+            <Collapse timeout="auto" onEntered={next1} {...props}>
+              <div />
+            </Collapse>
+          </ThemeProvider>
+        );
+      }
       const renderProps1 = render(<Test />);
       const collapse = renderProps1.container.firstChild;
       // Gets wrapper
diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx b/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx
index c5ccfce954335c..fc78ff94a05e8b 100644
--- a/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx
+++ b/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import { DialogContentText } from '@mui/material';
 
 const dialogContentTextTest = () => {
-  const CustomComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
+  const CustomComponent: React.FC<{ prop1: string; prop2: number }> = function CustomComponent() {
+    return <div />;
+  };
   return (
     <div>
       <DialogContentText />
diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.test.js b/packages/mui-material/src/FormControlLabel/FormControlLabel.test.js
index 5cdbb1083e6614..b135543e4ce537 100644
--- a/packages/mui-material/src/FormControlLabel/FormControlLabel.test.js
+++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.test.js
@@ -260,7 +260,9 @@ describe('<FormControlLabel />', () => {
   });
 
   it('should not inject extra props', () => {
-    const Control = (props) => <div data-testid="control" name="Dave" {...props} />;
+    function Control(props) {
+      return <div data-testid="control" name="Dave" {...props} />;
+    }
     const { getByTestId } = render(<FormControlLabel label="Pizza" control={<Control />} />);
 
     expect(getByTestId('control')).to.have.attribute('name', 'Dave');
diff --git a/packages/mui-material/src/Grid/Grid.test.js b/packages/mui-material/src/Grid/Grid.test.js
index ffcf3b349e5b83..c7b031abdb8446 100644
--- a/packages/mui-material/src/Grid/Grid.test.js
+++ b/packages/mui-material/src/Grid/Grid.test.js
@@ -693,7 +693,7 @@ describe('Material UI <Grid />', () => {
     it('should not throw error for setting zero spacing in theme', () => {
       const theme = createTheme({ spacing: 0 });
 
-      const App = () => {
+      function App() {
         return (
           <ThemeProvider theme={theme}>
             <Grid container spacing={4}>
@@ -702,7 +702,7 @@ describe('Material UI <Grid />', () => {
             </Grid>
           </ThemeProvider>
         );
-      };
+      }
 
       expect(() => {
         render(<App />);
diff --git a/packages/mui-material/src/Hidden/HiddenCss.test.js b/packages/mui-material/src/Hidden/HiddenCss.test.js
index 0202625e1fd2c8..bfd1d95b64fcf1 100644
--- a/packages/mui-material/src/Hidden/HiddenCss.test.js
+++ b/packages/mui-material/src/Hidden/HiddenCss.test.js
@@ -5,7 +5,9 @@ import HiddenCss from './HiddenCss';
 import { createTheme, ThemeProvider } from '../styles';
 import classes from './hiddenCssClasses';
 
-const TestChild = () => <div data-testid="test-child">bar</div>;
+function TestChild() {
+  return <div data-testid="test-child">bar</div>;
+}
 
 describe('<HiddenCss />', () => {
   const { render } = createRenderer();
diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js
index 65fb1ef3b131f4..eb1da1530c47fe 100644
--- a/packages/mui-material/src/InputBase/InputBase.test.js
+++ b/packages/mui-material/src/InputBase/InputBase.test.js
@@ -535,7 +535,7 @@ describe('<InputBase />', () => {
 
       it('should not warn when toggling between inputs', () => {
         // this will ensure that unregistering was called during unmount
-        const ToggleFormInputs = () => {
+        function ToggleFormInputs() {
           const [flag, setFlag] = React.useState(true);
 
           return (
@@ -552,7 +552,7 @@ describe('<InputBase />', () => {
               </button>
             </FormControl>
           );
-        };
+        }
 
         const { getByText } = render(<ToggleFormInputs />);
         expect(() => {
diff --git a/packages/mui-material/src/ListItemText/ListItemText.spec.tsx b/packages/mui-material/src/ListItemText/ListItemText.spec.tsx
index a48e1ef7da52db..eab98a93e51fe2 100644
--- a/packages/mui-material/src/ListItemText/ListItemText.spec.tsx
+++ b/packages/mui-material/src/ListItemText/ListItemText.spec.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { ListItemText } from '@mui/material';
 
-const CustomComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
+const CustomComponent: React.FC<{ prop1: string; prop2: number }> = function CustomComponent() {
+  return <div />;
+};
 
 function typographyPropsTest() {
   // @ts-expect-error
diff --git a/packages/mui-material/src/Modal/Modal.test.js b/packages/mui-material/src/Modal/Modal.test.js
index b5e1f771b93fc4..70ea0e748f230b 100644
--- a/packages/mui-material/src/Modal/Modal.test.js
+++ b/packages/mui-material/src/Modal/Modal.test.js
@@ -571,16 +571,18 @@ describe('<Modal />', () => {
     clock.withFakeTimers();
 
     it('should open and close', () => {
-      const TestCase = (props) => (
-        <React.Fragment>
-          <Modal open={props.open}>
-            <div>Hello</div>
-          </Modal>
-          <Modal open={props.open}>
-            <div>World</div>
-          </Modal>
-        </React.Fragment>
-      );
+      function TestCase(props) {
+        return (
+          <React.Fragment>
+            <Modal open={props.open}>
+              <div>Hello</div>
+            </Modal>
+            <Modal open={props.open}>
+              <div>World</div>
+            </Modal>
+          </React.Fragment>
+        );
+      }
       TestCase.propTypes = {
         open: PropTypes.bool,
       };
@@ -599,18 +601,20 @@ describe('<Modal />', () => {
     });
 
     it('should open and close with Transitions', () => {
-      const TestCase = (props) => (
-        <React.Fragment>
-          <Modal open={props.open}>
-            <Fade onEntered={props.onEntered} onExited={props.onExited} in={props.open}>
-              <div>Hello</div>
-            </Fade>
-          </Modal>
-          <Modal open={props.open}>
-            <div>World</div>
-          </Modal>
-        </React.Fragment>
-      );
+      function TestCase(props) {
+        return (
+          <React.Fragment>
+            <Modal open={props.open}>
+              <Fade onEntered={props.onEntered} onExited={props.onExited} in={props.open}>
+                <div>Hello</div>
+              </Fade>
+            </Modal>
+            <Modal open={props.open}>
+              <div>World</div>
+            </Modal>
+          </React.Fragment>
+        );
+      }
 
       const handleEntered = spy();
       const handleExited = spy();
@@ -663,18 +667,20 @@ describe('<Modal />', () => {
     clock.withFakeTimers();
 
     it('when true it should close after Transition has finished', () => {
-      const TestCase = (props) => (
-        <Modal open={props.open} closeAfterTransition>
-          <Fade
-            onEntered={props.onEntered}
-            onExiting={props.onExiting}
-            onExited={props.onExited}
-            in={props.open}
-          >
-            <div>Hello</div>
-          </Fade>
-        </Modal>
-      );
+      function TestCase(props) {
+        return (
+          <Modal open={props.open} closeAfterTransition>
+            <Fade
+              onEntered={props.onEntered}
+              onExiting={props.onExiting}
+              onExited={props.onExited}
+              in={props.open}
+            >
+              <div>Hello</div>
+            </Fade>
+          </Modal>
+        );
+      }
       const handleEntered = spy();
       const handleExiting = spy();
       const handleExited = spy();
@@ -719,18 +725,20 @@ describe('<Modal />', () => {
     });
 
     it('when false it should close before Transition has finished', () => {
-      const TestCase = (props) => (
-        <Modal open={props.open} closeAfterTransition={false}>
-          <Fade
-            onEntered={props.onEntered}
-            onExiting={props.onExiting}
-            onExited={props.onExited}
-            in={props.open}
-          >
-            <div>Hello</div>
-          </Fade>
-        </Modal>
-      );
+      function TestCase(props) {
+        return (
+          <Modal open={props.open} closeAfterTransition={false}>
+            <Fade
+              onEntered={props.onEntered}
+              onExiting={props.onExiting}
+              onExited={props.onExited}
+              in={props.open}
+            >
+              <div>Hello</div>
+            </Fade>
+          </Modal>
+        );
+      }
       const handleEntered = spy();
       const handleExiting = spy();
       const handleExited = spy();
diff --git a/packages/mui-material/src/Paper/Paper.spec.tsx b/packages/mui-material/src/Paper/Paper.spec.tsx
index 85a4b0b390d5e3..d1ac34ce0d91aa 100644
--- a/packages/mui-material/src/Paper/Paper.spec.tsx
+++ b/packages/mui-material/src/Paper/Paper.spec.tsx
@@ -1,15 +1,20 @@
 import * as React from 'react';
 import Paper from '@mui/material/Paper';
 
-const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
 
-const PaperTest = () => (
-  <div>
-    <Paper elevation={4} />
-    <Paper component="a" href="test" />
+function PaperTest() {
+  return (
+    <div>
+      <Paper elevation={4} />
+      <Paper component="a" href="test" />
 
-    <Paper component={CustomComponent} stringProp="test" numberProp={0} />
-    {/* @ts-expect-error */}
-    <Paper component={CustomComponent} />
-  </div>
-);
+      <Paper component={CustomComponent} stringProp="test" numberProp={0} />
+      {/* @ts-expect-error */}
+      <Paper component={CustomComponent} />
+    </div>
+  );
+}
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index bb00594406304f..8d8e7026f0547f 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1230,17 +1230,19 @@ describe('<Select />', () => {
       // avoid karma reload.
       event.preventDefault();
     });
-    const Form = (props) => (
-      <form onSubmit={handleSubmit}>
-        <Select required name="country" {...props}>
-          <MenuItem value="" />
-          <MenuItem value="france">France</MenuItem>
-          <MenuItem value="germany">Germany</MenuItem>
-          <MenuItem value="china">China</MenuItem>
-        </Select>
-        <button type="submit" />
-      </form>
-    );
+    function Form(props) {
+      return (
+        <form onSubmit={handleSubmit}>
+          <Select required name="country" {...props}>
+            <MenuItem value="" />
+            <MenuItem value="france">France</MenuItem>
+            <MenuItem value="germany">Germany</MenuItem>
+            <MenuItem value="china">China</MenuItem>
+          </Select>
+          <button type="submit" />
+        </form>
+      );
+    }
     const { container, setProps } = render(<Form value="" />);
 
     fireEvent.click(container.querySelector('button[type=submit]'));
diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
index b79eeabc4d654c..b448740edeaa52 100644
--- a/packages/mui-material/src/Slider/Slider.test.js
+++ b/packages/mui-material/src/Slider/Slider.test.js
@@ -1288,9 +1288,9 @@ describe('<Slider />', () => {
       // ARRANGE
       const dataTestId = 'slider-input-testid';
       const name = 'custom-input';
-      const CustomInput = ({ ownerState, ...props }) => (
-        <input {...props} data-testid={dataTestId} name={name} />
-      );
+      function CustomInput({ ownerState, ...props }) {
+        return <input {...props} data-testid={dataTestId} name={name} />;
+      }
 
       // ACT
       const { getByTestId } = render(<Slider components={{ Input: CustomInput }} />);
diff --git a/packages/mui-material/src/Snackbar/Snackbar.test.js b/packages/mui-material/src/Snackbar/Snackbar.test.js
index f074f3ae274d60..a9472baded997b 100644
--- a/packages/mui-material/src/Snackbar/Snackbar.test.js
+++ b/packages/mui-material/src/Snackbar/Snackbar.test.js
@@ -528,7 +528,9 @@ describe('<Snackbar />', () => {
 
     it('accepts a different component that handles the transition', () => {
       const transitionRef = React.createRef();
-      const Transition = () => <div className="cloned-element-class" ref={transitionRef} />;
+      function Transition() {
+        return <div className="cloned-element-class" ref={transitionRef} />;
+      }
       const { container } = render(<Snackbar open TransitionComponent={Transition} />);
       expect(container).to.contain(transitionRef.current);
     });
diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js
index d6ed61a0bd5efc..ac7ad19fd3b3c7 100644
--- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js
+++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js
@@ -19,7 +19,9 @@ describe('<SpeedDial />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
 
   const icon = <Icon>font_icon</Icon>;
-  const FakeAction = () => <div />;
+  function FakeAction() {
+    return <div />;
+  }
   const defaultProps = {
     open: true,
     icon,
diff --git a/packages/mui-material/src/StepContent/StepContent.test.js b/packages/mui-material/src/StepContent/StepContent.test.js
index 8ca60fd4e961e2..401e523b1fe00b 100644
--- a/packages/mui-material/src/StepContent/StepContent.test.js
+++ b/packages/mui-material/src/StepContent/StepContent.test.js
@@ -77,7 +77,9 @@ describe('<StepContent />', () => {
     });
 
     it('should use custom TransitionComponent', () => {
-      const TransitionComponent = () => <div data-testid="custom-transition" />;
+      function TransitionComponent() {
+        return <div data-testid="custom-transition" />;
+      }
 
       const { container, getByTestId } = render(
         <Stepper orientation="vertical">
diff --git a/packages/mui-material/src/StepLabel/StepLabel.test.js b/packages/mui-material/src/StepLabel/StepLabel.test.js
index 1d6083af3f3b01..dcc23e5cc290e3 100644
--- a/packages/mui-material/src/StepLabel/StepLabel.test.js
+++ b/packages/mui-material/src/StepLabel/StepLabel.test.js
@@ -48,7 +48,9 @@ describe('<StepLabel />', () => {
 
   describe('prop: StepIconComponent', () => {
     it('should render', () => {
-      const CustomizedIcon = () => <div data-testid="custom-icon" />;
+      function CustomizedIcon() {
+        return <div data-testid="custom-icon" />;
+      }
       const { container, getByTestId } = render(
         <Step active completed>
           <StepLabel StepIconComponent={CustomizedIcon}>Step One</StepLabel>
@@ -207,7 +209,9 @@ describe('<StepLabel />', () => {
 
   describe('renders <StepIcon> with the className completed', () => {
     it('renders with completed className when completed', () => {
-      const CustomizedIcon = () => <div data-testid="custom-icon" />;
+      function CustomizedIcon() {
+        return <div data-testid="custom-icon" />;
+      }
       const { container } = render(
         <Step completed>
           <StepLabel StepIconComponent={CustomizedIcon}>Step One</StepLabel>
@@ -221,7 +225,9 @@ describe('<StepLabel />', () => {
 
   describe('renders <StepIcon> with the className active', () => {
     it('renders with active className when active', () => {
-      const CustomizedIcon = () => <div data-testid="custom-icon" />;
+      function CustomizedIcon() {
+        return <div data-testid="custom-icon" />;
+      }
       const { container } = render(
         <Step active>
           <StepLabel StepIconComponent={CustomizedIcon}>Step One</StepLabel>
diff --git a/packages/mui-material/src/Stepper/Stepper.test.tsx b/packages/mui-material/src/Stepper/Stepper.test.tsx
index 1f50fc47435ca1..17138c559727b3 100644
--- a/packages/mui-material/src/Stepper/Stepper.test.tsx
+++ b/packages/mui-material/src/Stepper/Stepper.test.tsx
@@ -111,7 +111,9 @@ describe('<Stepper />', () => {
     });
 
     it('passes index down correctly when rendering children containing arrays', () => {
-      const CustomStep = ({ index }: StepProps) => <div data-index={index} data-testid="step" />;
+      function CustomStep({ index }: StepProps) {
+        return <div data-index={index} data-testid="step" />;
+      }
 
       const { getAllByTestId } = render(
         <Stepper nonLinear>
@@ -143,7 +145,9 @@ describe('<Stepper />', () => {
     });
 
     it('should allow the developer to specify a custom step connector', () => {
-      const CustomConnector = () => <div className="CustomConnector" />;
+      function CustomConnector() {
+        return <div className="CustomConnector" />;
+      }
       const { container } = render(
         <Stepper connector={<CustomConnector />}>
           <Step />
diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.test.js b/packages/mui-material/src/SvgIcon/SvgIcon.test.js
index 643091f7c99666..67f7bd26b1609a 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.test.js
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.test.js
@@ -98,11 +98,13 @@ describe('<SvgIcon />', () => {
   });
 
   describe('prop: inheritViewBox', () => {
-    const CustomSvg = (props) => (
-      <svg viewBox="-4 -4 24 24" {...props}>
-        {path}
-      </svg>
-    );
+    function CustomSvg(props) {
+      return (
+        <svg viewBox="-4 -4 24 24" {...props}>
+          {path}
+        </svg>
+      );
+    }
 
     it('should render with the default viewBox if neither inheritViewBox nor viewBox are provided', () => {
       const { container } = render(<SvgIcon component={CustomSvg} />);
diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js
index fe413f19a3d3fb..53a3f7969ce6b4 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.test.js
+++ b/packages/mui-material/src/TablePagination/TablePagination.test.js
@@ -277,7 +277,7 @@ describe('<TablePagination />', () => {
 
   describe('prop: count=-1', () => {
     it('should display the "of more than" text and keep the nextButton enabled', () => {
-      const Test = () => {
+      function Test() {
         const [page, setPage] = React.useState(0);
         return (
           <table>
@@ -295,7 +295,7 @@ describe('<TablePagination />', () => {
             </TableFooter>
           </table>
         );
-      };
+      }
 
       const { container, getByRole } = render(<Test />);
 
diff --git a/packages/mui-material/src/Tabs/Tabs.spec.tsx b/packages/mui-material/src/Tabs/Tabs.spec.tsx
index 29086280ce6505..249ed42187eac9 100644
--- a/packages/mui-material/src/Tabs/Tabs.spec.tsx
+++ b/packages/mui-material/src/Tabs/Tabs.spec.tsx
@@ -12,6 +12,10 @@ function testOnChange() {
   />;
 }
 
-const TabTest = () => <Tabs TabIndicatorProps={{ style: { backgroundColor: 'green' } }} />;
+function TabTest() {
+  return <Tabs TabIndicatorProps={{ style: { backgroundColor: 'green' } }} />;
+}
 
-const TabIndicatorSxTest = () => <Tabs TabIndicatorProps={{ sx: {} }} />;
+function TabIndicatorSxTest() {
+  return <Tabs TabIndicatorProps={{ sx: {} }} />;
+}
diff --git a/packages/mui-material/src/Tooltip/Tooltip.test.js b/packages/mui-material/src/Tooltip/Tooltip.test.js
index e660e6ccae99af..9193eeb52c4733 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.test.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.test.js
@@ -472,15 +472,17 @@ describe('<Tooltip />', () => {
 
     it('should handle autoFocus + onFocus forwarding', () => {
       const handleFocus = spy();
-      const AutoFocus = (props) => (
-        <div>
-          {props.open ? (
-            <Tooltip enterDelay={100} title="Title">
-              <input autoFocus onFocus={handleFocus} />
-            </Tooltip>
-          ) : null}
-        </div>
-      );
+      function AutoFocus(props) {
+        return (
+          <div>
+            {props.open ? (
+              <Tooltip enterDelay={100} title="Title">
+                <input autoFocus onFocus={handleFocus} />
+              </Tooltip>
+            ) : null}
+          </div>
+        );
+      }
 
       const { setProps } = render(
         <AutoFocus />,
@@ -1014,7 +1016,9 @@ describe('<Tooltip />', () => {
 
   describe('prop: PopperComponent', () => {
     it('can render a different component', () => {
-      const CustomPopper = () => <div data-testid="CustomPopper" />;
+      function CustomPopper() {
+        return <div data-testid="CustomPopper" />;
+      }
       render(
         <Tooltip title="Hello World" open PopperComponent={CustomPopper}>
           <button id="testChild" type="submit">
@@ -1077,7 +1081,9 @@ describe('<Tooltip />', () => {
 
   describe('prop: components', () => {
     it('can render a different Popper component', () => {
-      const CustomPopper = () => <div data-testid="CustomPopper" />;
+      function CustomPopper() {
+        return <div data-testid="CustomPopper" />;
+      }
       render(
         <Tooltip title="Hello World" open components={{ Popper: CustomPopper }}>
           <button id="testChild" type="submit">
diff --git a/packages/mui-material/src/Typography/typography.spec.tsx b/packages/mui-material/src/Typography/typography.spec.tsx
index fecb3dc159f5cc..cbbbeaca3a6764 100644
--- a/packages/mui-material/src/Typography/typography.spec.tsx
+++ b/packages/mui-material/src/Typography/typography.spec.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import { Typography } from '@mui/material';
 
 const typographyTest = () => {
-  const CustomComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
+  const CustomComponent: React.FC<{ prop1: string; prop2: number }> = function CustomComponent() {
+    return <div />;
+  };
   return (
     <div>
       <Typography />
diff --git a/packages/mui-material/src/styles/CssVarsProvider.spec.tsx b/packages/mui-material/src/styles/CssVarsProvider.spec.tsx
index f55a5d7b79341f..4d4c97cf7497da 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.spec.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.spec.tsx
@@ -53,11 +53,11 @@ const TestStyled = styled('div')(({ theme }) => ({
   },
 }));
 
-const TestUseTheme = () => {
+function TestUseTheme() {
   const theme = useTheme();
   // test that `theme` from useTheme has access to CSS vars
   return <div style={{ background: theme.vars.palette.common.background }}>test</div>;
-};
+}
 
 <CssVarsProvider theme={customTheme}>
   <TestStyled
diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js
index 369244261f757c..27293ce5e53d3e 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.test.js
+++ b/packages/mui-material/src/styles/CssVarsProvider.test.js
@@ -31,7 +31,7 @@ describe('[Material UI] CssVarsProvider', () => {
 
   describe('All CSS vars', () => {
     it('palette', () => {
-      const Vars = () => {
+      function Vars() {
         const theme = useTheme();
         return (
           <div>
@@ -52,7 +52,7 @@ describe('[Material UI] CssVarsProvider', () => {
             <div data-testid="palette-common">{JSON.stringify(theme.vars.palette.common)}</div>
           </div>
         );
-      };
+      }
 
       render(
         <CssVarsProvider>
@@ -182,14 +182,14 @@ describe('[Material UI] CssVarsProvider', () => {
     });
 
     it('opacity', () => {
-      const Vars = () => {
+      function Vars() {
         const theme = useTheme();
         return (
           <div>
             <div data-testid="opacity">{JSON.stringify(theme.vars.opacity)}</div>
           </div>
         );
-      };
+      }
 
       render(
         <CssVarsProvider>
@@ -208,14 +208,14 @@ describe('[Material UI] CssVarsProvider', () => {
     });
 
     it('shape', () => {
-      const Vars = () => {
+      function Vars() {
         const theme = useTheme();
         return (
           <div>
             <div data-testid="shape">{JSON.stringify(theme.vars.shape)}</div>
           </div>
         );
-      };
+      }
 
       render(
         <CssVarsProvider>
@@ -233,10 +233,10 @@ describe('[Material UI] CssVarsProvider', () => {
 
   describe('Typography', () => {
     it('contain expected typography', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{Object.keys(theme.typography).join(',')}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -252,10 +252,10 @@ describe('[Material UI] CssVarsProvider', () => {
 
   describe('Spacing', () => {
     it('provides spacing utility', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{theme.spacing(2)}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -269,10 +269,10 @@ describe('[Material UI] CssVarsProvider', () => {
 
   describe('Breakpoints', () => {
     it('provides breakpoint utilities', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{theme.breakpoints.up('sm')}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -286,11 +286,11 @@ describe('[Material UI] CssVarsProvider', () => {
 
   describe('Skipped vars', () => {
     it('should not contain `variants` in theme.vars', () => {
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         // @ts-expect-error
         return <div>{theme.vars.variants ? 'variants' : ''}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -302,11 +302,11 @@ describe('[Material UI] CssVarsProvider', () => {
     });
 
     it('should not contain `typography` in theme.vars', () => {
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         // @ts-expect-error
         return <div>{theme.vars.typography ? 'typography' : ''}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
@@ -318,11 +318,11 @@ describe('[Material UI] CssVarsProvider', () => {
     });
 
     it('should not contain `focus` in theme.vars', () => {
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         // @ts-expect-error
         return <div>{theme.vars.focus ? 'focus' : ''}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>
diff --git a/packages/mui-material/src/styles/styled.spec.tsx b/packages/mui-material/src/styles/styled.spec.tsx
index cb68c90d837f4d..ecf22af2ef8d4f 100644
--- a/packages/mui-material/src/styles/styled.spec.tsx
+++ b/packages/mui-material/src/styles/styled.spec.tsx
@@ -51,7 +51,9 @@ interface PropsFooVariant {
 interface PropsBarVariant {
   variant: 'bar';
 }
-const Component = (props: PropsFooVariant | PropsBarVariant) => <div />;
+function Component(props: PropsFooVariant | PropsBarVariant) {
+  return <div />;
+}
 const StyledComponent = styled(Component)(({ theme }) => ({}));
 const rendered = (
   <React.Fragment>
@@ -85,14 +87,14 @@ const ButtonIcon = styled('span', {
   overridesResolver: (props, styles) => styles.icon,
 })<{ ownerState: ButtonProps }>({});
 
-const Button = ({
+function Button({
   children,
   startIcon,
   endIcon,
   color = 'primary',
   variant = 'contained',
   ...props
-}: React.PropsWithChildren<ButtonProps>) => {
+}: React.PropsWithChildren<ButtonProps>) {
   const ownerState = { startIcon, endIcon, color, variant, ...props };
   return (
     <ButtonRoot ownerState={ownerState}>
@@ -101,7 +103,7 @@ const Button = ({
       {endIcon && <ButtonIcon ownerState={ownerState}>{endIcon}</ButtonIcon>}
     </ButtonRoot>
   );
-};
+}
 
 <ThemeProvider
   theme={createTheme({
diff --git a/packages/mui-material/src/styles/styled.test.js b/packages/mui-material/src/styles/styled.test.js
index e01c7d85c7afd9..a6e3f2d0b30600 100644
--- a/packages/mui-material/src/styles/styled.test.js
+++ b/packages/mui-material/src/styles/styled.test.js
@@ -514,8 +514,8 @@ describe('styled', () => {
       const { container } = render(<Component>Test</Component>);
 
       const classList = Array.from(container.firstChild.classList);
-      const regExp = new RegExp(`.*-MuiComponent-slot$`);
-      const regExpSC = new RegExp(`MuiComponent-slot-.*`);
+      const regExp = /.*-MuiComponent-slot$/;
+      const regExpSC = /MuiComponent-slot-.*/;
       let containsValidClass = false;
 
       classList.forEach((className) => {
@@ -539,8 +539,8 @@ describe('styled', () => {
       const { container } = render(<Component>Test</Component>);
 
       const classList = Array.from(container.firstChild.classList);
-      const regExp = new RegExp(`.*-MuiComponent-root$`);
-      const regExpSC = new RegExp(`MuiComponent-root.*`);
+      const regExp = /.*-MuiComponent-root$/;
+      const regExpSC = /MuiComponent-root.*/;
       let containsValidClass = false;
 
       classList.forEach((className) => {
@@ -620,7 +620,7 @@ describe('styled', () => {
     });
 
     it('classes props should be correctly applied to root and slot elements', () => {
-      const Child = (props) => {
+      function Child(props) {
         const { classes = {}, className, ...other } = props;
 
         return (
@@ -630,12 +630,12 @@ describe('styled', () => {
             {...other}
           />
         );
-      };
+      }
 
       const ParentRoot = styled('div', { name: 'MuiParent', slot: 'Root' })``;
       const ParentSlot = styled(Child, { name: 'MuiChild', slot: 'Slot' })``;
 
-      const Parent = (props) => {
+      function Parent(props) {
         const { classes = {}, className, ...other } = props;
 
         return (
@@ -648,7 +648,7 @@ describe('styled', () => {
             <ParentSlot classes={{ root: classes.slot }} />
           </ParentRoot>
         );
-      };
+      }
 
       const { container } = render(<Parent classes={{ root: 'root', slot: 'slot' }} />);
 
diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js
index 082f4ea33dc847..fd14a2c4a052a1 100644
--- a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js
+++ b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js
@@ -56,10 +56,10 @@ describe('useMediaQuery', () => {
 
     it('should work without window.matchMedia available', () => {
       expect(typeof window.matchMedia).to.equal('undefined');
-      const Test = () => {
+      function Test() {
         const matches = useMediaQuery('(min-width:100px)');
         return <span data-testid="matches">{`${matches}`}</span>;
-      };
+      }
 
       render(<Test />);
       expect(screen.getByTestId('matches').textContent).to.equal('false');
@@ -91,14 +91,14 @@ describe('useMediaQuery', () => {
     describe('option: defaultMatches', () => {
       it('should be false by default', () => {
         const getRenderCountRef = React.createRef();
-        const Test = () => {
+        function Test() {
           const matches = useMediaQuery('(min-width:2000px)');
           return (
             <RenderCounter ref={getRenderCountRef}>
               <span data-testid="matches">{`${matches}`}</span>
             </RenderCounter>
           );
-        };
+        }
 
         render(<Test />);
         expect(screen.getByTestId('matches').textContent).to.equal('false');
@@ -107,7 +107,7 @@ describe('useMediaQuery', () => {
 
       it('should take the option into account', () => {
         const getRenderCountRef = React.createRef();
-        const Test = () => {
+        function Test() {
           const matches = useMediaQuery('(min-width:2000px)', {
             defaultMatches: true,
           });
@@ -116,7 +116,7 @@ describe('useMediaQuery', () => {
               <span data-testid="matches">{`${matches}`}</span>
             </RenderCounter>
           );
-        };
+        }
 
         render(<Test />);
         expect(screen.getByTestId('matches').textContent).to.equal('false');
@@ -127,7 +127,7 @@ describe('useMediaQuery', () => {
     describe('option: noSsr', () => {
       it('should render once if the default value match the expectation', () => {
         const getRenderCountRef = React.createRef();
-        const Test = () => {
+        function Test() {
           const matches = useMediaQuery('(min-width:2000px)', {
             defaultMatches: false,
           });
@@ -137,7 +137,7 @@ describe('useMediaQuery', () => {
               <span data-testid="matches">{`${matches}`}</span>
             </RenderCounter>
           );
-        };
+        }
 
         render(<Test />);
         expect(screen.getByTestId('matches').textContent).to.equal('false');
@@ -146,7 +146,7 @@ describe('useMediaQuery', () => {
 
       it('should render twice if the default value does not match the expectation', () => {
         const getRenderCountRef = React.createRef();
-        const Test = () => {
+        function Test() {
           const matches = useMediaQuery('(min-width:2000px)', {
             defaultMatches: true,
           });
@@ -156,7 +156,7 @@ describe('useMediaQuery', () => {
               <span data-testid="matches">{`${matches}`}</span>
             </RenderCounter>
           );
-        };
+        }
 
         render(<Test />);
         expect(screen.getByTestId('matches').textContent).to.equal('false');
@@ -165,7 +165,7 @@ describe('useMediaQuery', () => {
 
       it('should render once if the default value does not match the expectation but `noSsr` is enabled', () => {
         const getRenderCountRef = React.createRef();
-        const Test = () => {
+        function Test() {
           const matches = useMediaQuery('(min-width:2000px)', {
             defaultMatches: true,
             noSsr: true,
@@ -176,7 +176,7 @@ describe('useMediaQuery', () => {
               <span data-testid="matches">{`${matches}`}</span>
             </RenderCounter>
           );
-        };
+        }
 
         render(<Test />);
         expect(screen.getByTestId('matches').textContent).to.equal('false');
@@ -186,7 +186,7 @@ describe('useMediaQuery', () => {
 
     it('should try to reconcile each time', () => {
       const getRenderCountRef = React.createRef();
-      const Test = () => {
+      function Test() {
         const matches = useMediaQuery('(min-width:2000px)', {
           defaultMatches: true,
         });
@@ -196,7 +196,7 @@ describe('useMediaQuery', () => {
             <span data-testid="matches">{`${matches}`}</span>
           </RenderCounter>
         );
-      };
+      }
 
       const { unmount } = render(<Test />);
       expect(screen.getByTestId('matches').textContent).to.equal('false');
@@ -211,7 +211,7 @@ describe('useMediaQuery', () => {
 
     it('should be able to change the query dynamically', () => {
       const getRenderCountRef = React.createRef();
-      const Test = (props) => {
+      function Test(props) {
         const matches = useMediaQuery(props.query, {
           defaultMatches: true,
         });
@@ -221,7 +221,7 @@ describe('useMediaQuery', () => {
             <span data-testid="matches">{`${matches}`}</span>
           </RenderCounter>
         );
-      };
+      }
       Test.propTypes = {
         query: PropTypes.string.isRequired,
       };
@@ -236,7 +236,7 @@ describe('useMediaQuery', () => {
 
     it('should observe the media query', () => {
       const getRenderCountRef = React.createRef();
-      const Test = (props) => {
+      function Test(props) {
         const matches = useMediaQuery(props.query);
 
         return (
@@ -244,7 +244,7 @@ describe('useMediaQuery', () => {
             <span data-testid="matches">{`${matches}`}</span>
           </RenderCounter>
         );
-      };
+      }
       Test.propTypes = {
         query: PropTypes.string.isRequired,
       };
@@ -270,7 +270,7 @@ describe('useMediaQuery', () => {
         return <span>{`${matches}`}</span>;
       }
 
-      const Test = () => {
+      function Test() {
         const ssrMatchMedia = (query) => ({
           matches: mediaQuery.match(query, {
             width: 3000,
@@ -284,7 +284,7 @@ describe('useMediaQuery', () => {
             <MyComponent />
           </ThemeProvider>
         );
-      };
+      }
 
       const { container } = renderToString(<Test />);
 
diff --git a/packages/mui-material/src/usePagination/usePagination.test.js b/packages/mui-material/src/usePagination/usePagination.test.js
index d01291bd8d82b9..93ed65e2a43c03 100644
--- a/packages/mui-material/src/usePagination/usePagination.test.js
+++ b/packages/mui-material/src/usePagination/usePagination.test.js
@@ -9,10 +9,10 @@ describe('usePagination', () => {
 
   const renderHook = (useHook) => {
     const result = {};
-    const TestCase = () => {
+    function TestCase() {
       result.current = useHook();
       return null;
-    };
+    }
     render(<TestCase />);
     return { result };
   };
diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
index c3686f560074e7..b1ff89955d8f6f 100644
--- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
+++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
@@ -12,14 +12,14 @@ describe('useScrollTrigger', () => {
   describe('defaultTrigger', () => {
     it('should be false by default', () => {
       const getRenderCountRef = React.createRef();
-      const TestDefault = () => {
+      function TestDefault() {
         const trigger = useScrollTrigger();
         return (
           <RenderCounter ref={getRenderCountRef}>
             <span data-testid="trigger">{`${trigger}`}</span>
           </RenderCounter>
         );
-      };
+      }
 
       render(<TestDefault />);
 
@@ -30,7 +30,7 @@ describe('useScrollTrigger', () => {
     it('should be false by default when using ref', () => {
       const getRenderCountRef = React.createRef();
       const triggerRef = React.createRef();
-      const TestDefaultWithRef = () => {
+      function TestDefaultWithRef() {
         const [container, setContainer] = React.useState();
         const trigger = useScrollTrigger({
           target: container,
@@ -41,7 +41,7 @@ describe('useScrollTrigger', () => {
             <span ref={setContainer} />
           </RenderCounter>
         );
-      };
+      }
       render(<TestDefaultWithRef />);
       expect(triggerRef.current.textContent).to.equal('false');
       expect(getRenderCountRef.current()).to.equal(2);
diff --git a/packages/mui-material/src/utils/isMuiElement.test.js b/packages/mui-material/src/utils/isMuiElement.test.js
index c0c8d4467d662b..2d599c920e7d74 100644
--- a/packages/mui-material/src/utils/isMuiElement.test.js
+++ b/packages/mui-material/src/utils/isMuiElement.test.js
@@ -7,7 +7,9 @@ import { Input, ListItemSecondaryAction, SvgIcon } from '..';
 describe('utils/index.js', () => {
   describe('isMuiElement', () => {
     it('should match static muiName property', () => {
-      const Component = () => null;
+      function Component() {
+        return null;
+      }
       Component.muiName = 'Component';
 
       expect(isMuiElement(<Component />, ['Component'])).to.equal(true);
diff --git a/packages/mui-material/test/typescript/components.spec.tsx b/packages/mui-material/test/typescript/components.spec.tsx
index 098371656766e3..43fb225ee9fdef 100644
--- a/packages/mui-material/test/typescript/components.spec.tsx
+++ b/packages/mui-material/test/typescript/components.spec.tsx
@@ -80,82 +80,92 @@ import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
 import { expectType } from '@mui/types';
 
 const log = console.log;
-const FakeIcon = () => <div>ICON</div>;
+function FakeIcon() {
+  return <div>ICON</div>;
+}
 
 const TestOverride = React.forwardRef<HTMLDivElement, { x?: number }>((props, ref) => (
   <div ref={ref} />
 ));
 
-const AppBarTest = () => (
-  <AppBar position="static">
-    <Toolbar>
-      <IconButton color="inherit" aria-label="menu">
-        <FakeIcon />
-      </IconButton>
-      <Typography variant="h6" color="inherit">
-        Title
-      </Typography>
-      <Button color="inherit">Login</Button>
-    </Toolbar>
-  </AppBar>
-);
+function AppBarTest() {
+  return (
+    <AppBar position="static">
+      <Toolbar>
+        <IconButton color="inherit" aria-label="menu">
+          <FakeIcon />
+        </IconButton>
+        <Typography variant="h6" color="inherit">
+          Title
+        </Typography>
+        <Button color="inherit">Login</Button>
+      </Toolbar>
+    </AppBar>
+  );
+}
 
-const AvatarTest = () => (
-  <div>
-    <Avatar
-      ref={(elem) => {
-        expectType<HTMLDivElement | null, typeof elem>(elem);
-      }}
-      onClick={(event) => {
-        expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof event>(event);
-        log(event);
-      }}
-      alt="Image Alt"
-      src="example.jpg"
-    />
-    <Avatar<'button'>
-      component="button"
-      ref={(elem) => {
-        expectType<HTMLButtonElement | null, typeof elem>(elem);
-      }}
-      onClick={(event) => {
-        expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
-        log(event);
-      }}
-      alt="Image Alt"
-      src="example.jpg"
-    />
-    <Avatar
-      component="button"
-      ref={(elem: HTMLButtonElement) => {}}
-      onClick={(event: React.MouseEvent<HTMLButtonElement>) => log(event)}
-      alt="Image Alt"
-      src="example.jpg"
-    />
-    <Avatar component={TestOverride} x={3} alt="Image Alt" src="example.jpg" />
-    <Avatar<typeof TestOverride>
-      component={TestOverride}
-      ref={(elem) => {
-        expectType<HTMLDivElement | null, typeof elem>(elem);
-      }}
-      x={3}
-      alt="Image Alt"
-      src="example.jpg"
-    />
-    {/* @ts-expect-error onClick isn't allowed since we're overriding with a component that doesn't have that prop: */}
-    <Avatar component={TestOverride} onClick={log} />
-  </div>
-);
+function AvatarTest() {
+  return (
+    <div>
+      <Avatar
+        ref={(elem) => {
+          expectType<HTMLDivElement | null, typeof elem>(elem);
+        }}
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof event>(event);
+          log(event);
+        }}
+        alt="Image Alt"
+        src="example.jpg"
+      />
+      <Avatar<'button'>
+        component="button"
+        ref={(elem) => {
+          expectType<HTMLButtonElement | null, typeof elem>(elem);
+        }}
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          log(event);
+        }}
+        alt="Image Alt"
+        src="example.jpg"
+      />
+      <Avatar
+        component="button"
+        ref={(elem: HTMLButtonElement) => {}}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) => log(event)}
+        alt="Image Alt"
+        src="example.jpg"
+      />
+      <Avatar component={TestOverride} x={3} alt="Image Alt" src="example.jpg" />
+      <Avatar<typeof TestOverride>
+        component={TestOverride}
+        ref={(elem) => {
+          expectType<HTMLDivElement | null, typeof elem>(elem);
+        }}
+        x={3}
+        alt="Image Alt"
+        src="example.jpg"
+      />
+      {/* @ts-expect-error onClick isn't allowed since we're overriding with a component that doesn't have that prop: */}
+      <Avatar component={TestOverride} onClick={log} />
+    </div>
+  );
+}
 
-const AvatarClassName = () => <Avatar className="foo" />;
+function AvatarClassName() {
+  return <Avatar className="foo" />;
+}
 
-const BadgeTest = () => (
-  <Badge badgeContent={4} color="primary">
-    <FakeIcon />
-  </Badge>
-);
+function BadgeTest() {
+  return (
+    <Badge badgeContent={4} color="primary">
+      <FakeIcon />
+    </Badge>
+  );
+}
 
-const BottomNavigationTest = () => {
+function BottomNavigationTest() {
   const value = 123;
 
   return (
@@ -165,7 +175,7 @@ const BottomNavigationTest = () => {
       <BottomNavigationAction label={<span>Nearby</span>} icon={<FakeIcon />} />
     </BottomNavigation>
   );
-};
+}
 
 const iconButtonTest = () => (
   <div>
@@ -191,9 +201,10 @@ const iconButtonAsLinkTest = () => {
   const ForwardedLink = React.forwardRef<HTMLAnchorElement, ReactRouterLinkProps>((props, ref) => (
     <ReactRouterLink {...props} ref={ref} />
   ));
-  const ExtendedIconButton: React.FC<IconButtonProps<typeof ForwardedLink>> = (props) => (
-    <IconButton component={ForwardedLink} {...props} />
-  );
+  const ExtendedIconButton: React.FC<IconButtonProps<typeof ForwardedLink>> =
+    function ExtendedIconButton(props) {
+      return <IconButton component={ForwardedLink} {...props} />;
+    };
   return (
     <ExtendedIconButton color="secondary" aria-label="Go to top page." to="/" target="_self">
       <FakeIcon />
@@ -201,103 +212,109 @@ const iconButtonAsLinkTest = () => {
   );
 };
 
-const CardTest = () => (
-  <Card>
-    <CardContent>
-      <Typography variant="body1">Word of the Day</Typography>
-      <Typography variant="h5" component="h2">
-        be-nev-o-lent
-      </Typography>
-      <Typography variant="body1">adjective</Typography>
-      <Typography component="p">
-        well meaning and kindly.
-        <br />a benevolent smile
-      </Typography>
-    </CardContent>
-    <CardActions>
-      <Button size="small">Learn More</Button>
-    </CardActions>
-  </Card>
-);
-
-const CardMediaTest = () => (
-  <Card>
-    <CardHeader
-      avatar={<Avatar aria-label="recipe">R</Avatar>}
-      title="Shrimp and Chorizo Paella"
-      subheader="September 14, 2016"
-    />
-    <CardMedia image="src.png" component="div">
-      <img src="image/src.png" alt="Contemplative Reptile" />
-    </CardMedia>
-    <CardContent>
-      <Typography component="p">
-        This impressive paella is a perfect party dish and a fun meal to cook together with your
-        guests. Add 1 cup of frozen peas along with the mussels, if you like.
-      </Typography>
-    </CardContent>
-    <CardActions disableSpacing>
-      <IconButton aria-label="add to favorites">
-        <FakeIcon />
-      </IconButton>
-      <IconButton aria-label="share">
-        <FakeIcon />
-      </IconButton>
-      <IconButton aria-label="show more">
-        <FakeIcon />
-      </IconButton>
-    </CardActions>
-    <Collapse in timeout="auto" unmountOnExit>
+function CardTest() {
+  return (
+    <Card>
       <CardContent>
-        <Typography paragraph variant="body2">
-          Method:
-        </Typography>
-        <Typography paragraph>
-          Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
-          minutes.
-        </Typography>
-        <Typography paragraph>
-          Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high heat.
-          Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly browned, 6
-          to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken and chorizo
-          in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook,
-          stirring often until thickened and fragrant, about 10 minutes. Add saffron broth and
-          remaining 4 1/2 cups chicken broth; bring to a boil.
+        <Typography variant="body1">Word of the Day</Typography>
+        <Typography variant="h5" component="h2">
+          be-nev-o-lent
         </Typography>
-        <Typography paragraph>
-          Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
-          without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
-          medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
-          again without stirring, until mussels have opened and rice is just tender, 5 to 7 minutes
-          more. (Discard any mussels that don&apos;t open.)
-        </Typography>
-        <Typography>
-          Set aside off of the heat to let rest for 10 minutes, and then serve.
+        <Typography variant="body1">adjective</Typography>
+        <Typography component="p">
+          well meaning and kindly.
+          <br />a benevolent smile
         </Typography>
       </CardContent>
-    </Collapse>
-  </Card>
-);
+      <CardActions>
+        <Button size="small">Learn More</Button>
+      </CardActions>
+    </Card>
+  );
+}
 
-const ChipsTest = () => (
-  <div>
-    <Chip label="Basic Chip" />
-    <Chip avatar={<Avatar>M</Avatar>} label="Clickable Chip" onClick={(e) => log(e)} />
-    <Chip avatar={<Avatar src="image.bmp" />} label="Deletable Chip" onDelete={(e) => log(e)} />
-    <Chip
-      avatar={
-        <Avatar>
+function CardMediaTest() {
+  return (
+    <Card>
+      <CardHeader
+        avatar={<Avatar aria-label="recipe">R</Avatar>}
+        title="Shrimp and Chorizo Paella"
+        subheader="September 14, 2016"
+      />
+      <CardMedia image="src.png" component="div">
+        <img src="image/src.png" alt="Contemplative Reptile" />
+      </CardMedia>
+      <CardContent>
+        <Typography component="p">
+          This impressive paella is a perfect party dish and a fun meal to cook together with your
+          guests. Add 1 cup of frozen peas along with the mussels, if you like.
+        </Typography>
+      </CardContent>
+      <CardActions disableSpacing>
+        <IconButton aria-label="add to favorites">
           <FakeIcon />
-        </Avatar>
-      }
-      label="Clickable Deletable Chip"
-      onClick={(e) => log(e)}
-      onDelete={(e) => log(e)}
-    />
-  </div>
-);
+        </IconButton>
+        <IconButton aria-label="share">
+          <FakeIcon />
+        </IconButton>
+        <IconButton aria-label="show more">
+          <FakeIcon />
+        </IconButton>
+      </CardActions>
+      <Collapse in timeout="auto" unmountOnExit>
+        <CardContent>
+          <Typography paragraph variant="body2">
+            Method:
+          </Typography>
+          <Typography paragraph>
+            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
+            minutes.
+          </Typography>
+          <Typography paragraph>
+            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
+            heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
+            browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
+            and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
+            pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
+            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+          </Typography>
+          <Typography paragraph>
+            Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
+            without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
+            medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
+            again without stirring, until mussels have opened and rice is just tender, 5 to 7
+            minutes more. (Discard any mussels that don&apos;t open.)
+          </Typography>
+          <Typography>
+            Set aside off of the heat to let rest for 10 minutes, and then serve.
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+}
 
-const DialogTest = () => {
+function ChipsTest() {
+  return (
+    <div>
+      <Chip label="Basic Chip" />
+      <Chip avatar={<Avatar>M</Avatar>} label="Clickable Chip" onClick={(e) => log(e)} />
+      <Chip avatar={<Avatar src="image.bmp" />} label="Deletable Chip" onDelete={(e) => log(e)} />
+      <Chip
+        avatar={
+          <Avatar>
+            <FakeIcon />
+          </Avatar>
+        }
+        label="Clickable Deletable Chip"
+        onClick={(e) => log(e)}
+        onDelete={(e) => log(e)}
+      />
+    </div>
+  );
+}
+
+function DialogTest() {
   const emails = ['username@gmail.com', 'user02@gmail.com'];
   return (
     <Dialog onClose={(event) => log(event)} open>
@@ -376,16 +393,18 @@ const DialogTest = () => {
       </DialogContent>
     </Dialog>
   );
-};
+}
 
-const DividerTest = () => (
-  <div>
-    <Divider />
-    <Divider light />
-  </div>
-);
+function DividerTest() {
+  return (
+    <div>
+      <Divider />
+      <Divider light />
+    </div>
+  );
+}
 
-const DrawerTest = () => {
+function DrawerTest() {
   const open = {
     top: false,
     left: false,
@@ -434,9 +453,9 @@ const DrawerTest = () => {
       </Drawer>
     </div>
   );
-};
+}
 
-const SwipeableDrawerTest = () => {
+function SwipeableDrawerTest() {
   const open = {
     top: false,
     left: false,
@@ -486,74 +505,82 @@ const SwipeableDrawerTest = () => {
       </SwipeableDrawer>
     </div>
   );
-};
+}
 
-const AccordionTest = () => (
-  <div>
-    <Accordion onChange={(e) => log(e)} expanded disabled>
-      <AccordionSummary />
-      <AccordionDetails />
-    </Accordion>
-    <Accordion defaultExpanded>
-      <AccordionSummary expandIcon={<FakeIcon />}>
-        <Typography>...</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Typography>...</Typography>
-      </AccordionDetails>
-      <AccordionActions>
-        <Button size="small">Save</Button>
-      </AccordionActions>
-    </Accordion>
-  </div>
-);
+function AccordionTest() {
+  return (
+    <div>
+      <Accordion onChange={(e) => log(e)} expanded disabled>
+        <AccordionSummary />
+        <AccordionDetails />
+      </Accordion>
+      <Accordion defaultExpanded>
+        <AccordionSummary expandIcon={<FakeIcon />}>
+          <Typography>...</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>...</Typography>
+        </AccordionDetails>
+        <AccordionActions>
+          <Button size="small">Save</Button>
+        </AccordionActions>
+      </Accordion>
+    </div>
+  );
+}
 
-const GridTest = () => (
-  <Grid component={Paper} container>
-    <Grid item xs={12}>
-      ...
-    </Grid>
-    <Grid item sm={12}>
-      ...
-    </Grid>
-    <Grid item xl>
-      ...
-    </Grid>
-    <Grid item style={{ color: 'red' }}>
-      ...
+function GridTest() {
+  return (
+    <Grid component={Paper} container>
+      <Grid item xs={12}>
+        ...
+      </Grid>
+      <Grid item sm={12}>
+        ...
+      </Grid>
+      <Grid item xl>
+        ...
+      </Grid>
+      <Grid item style={{ color: 'red' }}>
+        ...
+      </Grid>
     </Grid>
-  </Grid>
-);
+  );
+}
 
-const ImageListTest = () => (
-  <ImageList rowHeight={160} cols={3} onClick={(e) => log(e)}>
-    <ImageListItem cols={1} rows={4} onClick={(e) => log(e)}>
-      <img src="img.png" alt="alt text" />
-    </ImageListItem>
-    ,
-  </ImageList>
-);
+function ImageListTest() {
+  return (
+    <ImageList rowHeight={160} cols={3} onClick={(e) => log(e)}>
+      <ImageListItem cols={1} rows={4} onClick={(e) => log(e)}>
+        <img src="img.png" alt="alt text" />
+      </ImageListItem>
+      ,
+    </ImageList>
+  );
+}
 
-const ListTest = () => (
-  <List>
-    {[0, 1, 2, 3].map((value) => (
-      <ListItem dense button selected={false} key={value} onClick={(e) => log(e)}>
-        <Checkbox checked tabIndex={-1} disableRipple />
-        <ListItemText primary={`Line item ${value + 1}`} />
-        <ListItemSecondaryAction>
-          <IconButton aria-label="comments">
-            <FakeIcon />
-          </IconButton>
-        </ListItemSecondaryAction>
+function ListTest() {
+  return (
+    <List>
+      {[0, 1, 2, 3].map((value) => (
+        <ListItem dense button selected={false} key={value} onClick={(e) => log(e)}>
+          <Checkbox checked tabIndex={-1} disableRipple />
+          <ListItemText primary={`Line item ${value + 1}`} />
+          <ListItemSecondaryAction>
+            <IconButton aria-label="comments">
+              <FakeIcon />
+            </IconButton>
+          </ListItemSecondaryAction>
+        </ListItem>
+      ))}
+      <ListItem ContainerComponent="div" ContainerProps={{ className: 'demo' }}>
+        an item
       </ListItem>
-    ))}
-    <ListItem ContainerComponent="div" ContainerProps={{ className: 'demo' }}>
-      an item
-    </ListItem>
-  </List>
-);
+    </List>
+  );
+}
 
-const MenuTest = () => {
+function MenuTest() {
   const anchorEl = document.getElementById('foo')!;
   const options = [
     'Show all notification content',
@@ -616,25 +643,29 @@ const MenuTest = () => {
       />
     </Menu>
   );
-};
+}
 
-const CircularProgressTest = () => (
-  <div>
-    <CircularProgress />
-    <CircularProgress size={50} />
-    <CircularProgress color="secondary" />
-    <CircularProgress color="secondary" size={50} />
-  </div>
-);
+function CircularProgressTest() {
+  return (
+    <div>
+      <CircularProgress />
+      <CircularProgress size={50} />
+      <CircularProgress color="secondary" />
+      <CircularProgress color="secondary" size={50} />
+    </div>
+  );
+}
 
-const LinearProgressTest = () => (
-  <div>
-    <LinearProgress variant="determinate" value={12} />
-    <LinearProgress color="secondary" variant="determinate" value={76} />
-  </div>
-);
+function LinearProgressTest() {
+  return (
+    <div>
+      <LinearProgress variant="determinate" value={12} />
+      <LinearProgress color="secondary" variant="determinate" value={76} />
+    </div>
+  );
+}
 
-const SelectionControlTest = () => {
+function SelectionControlTest() {
   const state = {
     checkedA: true,
     checkedB: false,
@@ -682,9 +713,9 @@ const SelectionControlTest = () => {
       />
     </FormGroup>
   );
-};
+}
 
-const SwitchTest = () => {
+function SwitchTest() {
   const state = {
     checkedA: true,
     checkedB: false,
@@ -718,39 +749,41 @@ const SwitchTest = () => {
       />
     </div>
   );
-};
+}
 
-const SnackbarTest = () => (
-  <div>
-    <Button onClick={(e) => log(e)}>Open simple snackbar</Button>
-    <Snackbar
-      anchorOrigin={{
-        vertical: 'bottom',
-        horizontal: 'left',
-      }}
-      open
-      autoHideDuration={6000}
-      onClose={(event) => log(event)}
-      ContentProps={
-        {
-          // 'aria-describedby': 'message-id',
-          // ^ will work once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/22582 is merged.
+function SnackbarTest() {
+  return (
+    <div>
+      <Button onClick={(e) => log(e)}>Open simple snackbar</Button>
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        open
+        autoHideDuration={6000}
+        onClose={(event) => log(event)}
+        ContentProps={
+          {
+            // 'aria-describedby': 'message-id',
+            // ^ will work once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/22582 is merged.
+          }
         }
-      }
-      message={<span id="message-id">Note archived</span>}
-      action={[
-        <Button key="undo" color="secondary" size="small" onClick={(e) => log(e)}>
-          UNDO
-        </Button>,
-        <IconButton key="close" aria-label="close" color="inherit" onClick={(e) => log(e)}>
-          <FakeIcon />
-        </IconButton>,
-      ]}
-    />
-  </div>
-);
+        message={<span id="message-id">Note archived</span>}
+        action={[
+          <Button key="undo" color="secondary" size="small" onClick={(e) => log(e)}>
+            UNDO
+          </Button>,
+          <IconButton key="close" aria-label="close" color="inherit" onClick={(e) => log(e)}>
+            <FakeIcon />
+          </IconButton>,
+        ]}
+      />
+    </div>
+  );
+}
 
-const SnackbarContentTest = () => {
+function SnackbarContentTest() {
   const action = (
     <Button color="secondary" size="small">
       lorem ipsum dolorem
@@ -775,7 +808,7 @@ const SnackbarContentTest = () => {
       />
     </div>
   );
-};
+}
 
 const StepperTest = () =>
   class DotsMobileStepper extends React.Component<{
@@ -845,100 +878,118 @@ const TableTest = () => {
   ];
 };
 
-const TextFieldTest = () => (
-  <div>
-    <TextField id="name" label="Name" value="Alice" />
-    <TextField id="name" label={<strong>Name</strong>} value="Alice" />
-    <TextField
-      id="name"
-      label="Name"
-      value="Alice"
-      onChange={(event) => log({ name: event.currentTarget.value })}
-    />
-    <TextField id="name" label="Name" value="Alice" InputProps={{ classes: { root: 'foo' } }} />
-    <TextField
-      type="number"
-      inputProps={{
-        min: '0',
-        max: '10',
-        step: '1',
-        style: {
-          // just a long CSS property to test autocompletion
-          WebkitAnimationIterationCount: 0,
-        },
-      }}
-    />
-    <Input inputComponent="input" />
-  </div>
-);
-
-const SelectTest = () => (
-  <Select input={<Input />} value={10} onChange={(e) => log(e.target.value)}>
-    <MenuItem value="">
-      <em>None</em>
-    </MenuItem>
-    <MenuItem value={10}>Ten</MenuItem>
-    <MenuItem value={20}>Twenty</MenuItem>
-    <MenuItem value={30}>Thirty</MenuItem>
-  </Select>
-);
+function TextFieldTest() {
+  return (
+    <div>
+      <TextField id="name" label="Name" value="Alice" />
+      <TextField id="name" label={<strong>Name</strong>} value="Alice" />
+      <TextField
+        id="name"
+        label="Name"
+        value="Alice"
+        onChange={(event) => log({ name: event.currentTarget.value })}
+      />
+      <TextField id="name" label="Name" value="Alice" InputProps={{ classes: { root: 'foo' } }} />
+      <TextField
+        type="number"
+        inputProps={{
+          min: '0',
+          max: '10',
+          step: '1',
+          style: {
+            // just a long CSS property to test autocompletion
+            WebkitAnimationIterationCount: 0,
+          },
+        }}
+      />
+      <Input inputComponent="input" />
+    </div>
+  );
+}
 
-const InputAdornmentTest = () => (
-  <InputAdornment position="end" onClick={() => alert('Hello')}>
-    Some Icon
-  </InputAdornment>
-);
+function SelectTest() {
+  return (
+    <Select input={<Input />} value={10} onChange={(e) => log(e.target.value)}>
+      <MenuItem value="">
+        <em>None</em>
+      </MenuItem>
+      <MenuItem value={10}>Ten</MenuItem>
+      <MenuItem value={20}>Twenty</MenuItem>
+      <MenuItem value={30}>Thirty</MenuItem>
+    </Select>
+  );
+}
 
-const TooltipComponentTest = () => (
-  <div>
-    <Tooltip id="tooltip-top-start" title="Add" placement="top-start">
-      <Button>top-start</Button>
-    </Tooltip>
-    <Tooltip id="tooltip-top-start" title={<strong>Add</strong>} placement="top-start">
-      <Button>top-start</Button>
-    </Tooltip>
-  </div>
-);
+function InputAdornmentTest() {
+  return (
+    <InputAdornment position="end" onClick={() => alert('Hello')}>
+      Some Icon
+    </InputAdornment>
+  );
+}
 
-const ClickAwayListenerComponentTest = () => (
-  <ClickAwayListener onClickAway={() => {}}>
-    <div />
-  </ClickAwayListener>
-);
+function TooltipComponentTest() {
+  return (
+    <div>
+      <Tooltip id="tooltip-top-start" title="Add" placement="top-start">
+        <Button>top-start</Button>
+      </Tooltip>
+      <Tooltip id="tooltip-top-start" title={<strong>Add</strong>} placement="top-start">
+        <Button>top-start</Button>
+      </Tooltip>
+    </div>
+  );
+}
 
-const TransitionTest = () => (
-  <React.Fragment>
-    <Fade in={false}>
-      <div />
-    </Fade>
-    <Collapse in={false} mountOnEnter unmountOnExit timeout={200}>
-      <div />
-    </Collapse>
-    <Grow in={false} timeout="auto" onEnter={() => {}}>
+function ClickAwayListenerComponentTest() {
+  return (
+    <ClickAwayListener onClickAway={() => {}}>
       <div />
-    </Grow>
-  </React.Fragment>
-);
+    </ClickAwayListener>
+  );
+}
 
-const BackdropTest = () => <Backdrop open onTouchMove={() => {}} />;
+function TransitionTest() {
+  return (
+    <React.Fragment>
+      <Fade in={false}>
+        <div />
+      </Fade>
+      <Collapse in={false} mountOnEnter unmountOnExit timeout={200}>
+        <div />
+      </Collapse>
+      <Grow in={false} timeout="auto" onEnter={() => {}}>
+        <div />
+      </Grow>
+    </React.Fragment>
+  );
+}
 
-const PopoverTest = () => <Popover open />;
+function BackdropTest() {
+  return <Backdrop open onTouchMove={() => {}} />;
+}
 
-const InputLabelTest = () => (
-  <InputLabel
-    classes={{
-      root: 'foo',
-      asterisk: 'foo',
-      disabled: 'foo',
-      error: 'foo',
-      filled: 'foo',
-      focused: 'foo',
-      required: 'foo',
-    }}
-  />
-);
+function PopoverTest() {
+  return <Popover open />;
+}
 
-const LinkTest = () => {
+function InputLabelTest() {
+  return (
+    <InputLabel
+      classes={{
+        root: 'foo',
+        asterisk: 'foo',
+        disabled: 'foo',
+        error: 'foo',
+        filled: 'foo',
+        focused: 'foo',
+        required: 'foo',
+      }}
+    />
+  );
+}
+
+function LinkTest() {
   const dudUrl = 'javascript';
   return (
     <Typography>
@@ -951,7 +1002,7 @@ const LinkTest = () => {
       </Link>
     </Typography>
   );
-};
+}
 
 const refTest = () => {
   // for a detailed explanation of refs in react see https://github.com/mui/material-ui/pull/15199
@@ -982,6 +1033,10 @@ const refTest = () => {
   />;
 };
 
-const CssBaselineTest = () => <CssBaseline>Test</CssBaseline>;
+function CssBaselineTest() {
+  return <CssBaseline>Test</CssBaseline>;
+}
 
-const ScopedCssBaselineTest = () => <ScopedCssBaseline>Test</ScopedCssBaseline>;
+function ScopedCssBaselineTest() {
+  return <ScopedCssBaseline>Test</ScopedCssBaseline>;
+}
diff --git a/packages/mui-styles/src/StylesProvider/StylesProvider.test.js b/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
index 66075395b8a8c4..ade0f6c3b18663 100644
--- a/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
+++ b/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
@@ -62,10 +62,10 @@ describe('StylesProvider', () => {
     });
 
     const useStyles = makeStyles({ root: { display: 'flex' } });
-    const Button = (props) => {
+    function Button(props) {
       const classes = useStyles();
       return <button type="button" className={classes.root} {...props} />;
-    };
+    }
 
     function assertRendering(markup, sheetsRegistry) {
       expect(markup.match('Hello World')).not.to.equal(null);
diff --git a/packages/mui-styles/src/makeStyles/makeStyles.test.js b/packages/mui-styles/src/makeStyles/makeStyles.test.js
index 4cf1cf3b628c49..4e944c9220457d 100644
--- a/packages/mui-styles/src/makeStyles/makeStyles.test.js
+++ b/packages/mui-styles/src/makeStyles/makeStyles.test.js
@@ -219,10 +219,10 @@ describe('makeStyles', () => {
 
     it('should run lifecycles with no theme', () => {
       const useStyles = makeStyles({ root: { display: 'flex' } });
-      const StyledComponent = () => {
+      function StyledComponent() {
         useStyles();
         return <div />;
-      };
+      }
 
       const wrapper = mount(
         <ThemeProvider theme={createTheme()}>
@@ -252,10 +252,10 @@ describe('makeStyles', () => {
       const useStyles = makeStyles((theme) => ({ root: { padding: theme.spacing(1) } }), {
         name: 'MuiTextField',
       });
-      const StyledComponent = () => {
+      function StyledComponent() {
         useStyles();
         return <div />;
-      };
+      }
 
       const wrapper = mount(
         <ThemeProvider theme={createTheme()}>
@@ -289,10 +289,10 @@ describe('makeStyles', () => {
             name: 'MuiTextField',
           },
         );
-        const StyledComponent = () => {
+        function StyledComponent() {
           useStyles();
           return <div />;
-        };
+        }
 
         mount(
           <ThemeProvider
@@ -358,20 +358,22 @@ describe('makeStyles', () => {
       const useStyles = makeStyles({
         root: (props) => ({ margin: 8, padding: props.padding || 8 }),
       });
-      const StyledComponent = (props) => {
+      function StyledComponent(props) {
         const classes = useStyles(props);
         return <div className={classes.root} />;
-      };
+      }
 
-      const Test = (props) => (
-        <StylesProvider
-          sheetsRegistry={sheetsRegistry}
-          sheetsCache={new Map()}
-          generateClassName={generateClassName}
-        >
-          <StyledComponent {...props} />
-        </StylesProvider>
-      );
+      function Test(props) {
+        return (
+          <StylesProvider
+            sheetsRegistry={sheetsRegistry}
+            sheetsCache={new Map()}
+            generateClassName={generateClassName}
+          >
+            <StyledComponent {...props} />
+          </StylesProvider>
+        );
+      }
 
       const wrapper = mount(<Test />);
       expect(sheetsRegistry.registry.length).to.equal(2);
@@ -396,12 +398,14 @@ describe('makeStyles', () => {
   describe('options: disableGeneration', () => {
     it('should not generate the styles', () => {
       const sheetsRegistry = new SheetsRegistry();
-      const Empty = () => <div />;
+      function Empty() {
+        return <div />;
+      }
       const useStyles = makeStyles({ root: { padding: 8 } });
-      const StyledComponent = () => {
+      function StyledComponent() {
         const classes = useStyles();
         return <Empty classes={classes} />;
-      };
+      }
 
       const wrapper = mount(
         <StylesProvider sheetsRegistry={sheetsRegistry} disableGeneration sheetsCache={new Map()}>
@@ -424,16 +428,16 @@ describe('makeStyles', () => {
 
     it('should use the displayName', () => {
       const useStyles1 = makeStyles({ root: { padding: 8 } });
-      const StyledComponent1 = () => {
+      function StyledComponent1() {
         useStyles1();
         return <div />;
-      };
+      }
 
       const useStyles2 = makeStyles({ root: { padding: 8 } }, { name: 'Fooo' });
-      const StyledComponent2 = () => {
+      function StyledComponent2() {
         useStyles2();
         return <div />;
-      };
+      }
 
       mount(
         <StylesProvider sheetsRegistry={sheetsRegistry} sheetsCache={new Map()}>
@@ -483,7 +487,7 @@ describe('makeStyles', () => {
         backgroundColor: PropTypes.string.isRequired,
       };
 
-      StressTest = () => {
+      StressTest = function StressTestComponent() {
         const [backgroundColor, setBackgroundColor] = React.useState('black');
         const handleBackgroundColorChange = (event) => {
           setBackgroundColor(event.target.value);
diff --git a/packages/mui-styles/src/styled/styled.spec.tsx b/packages/mui-styles/src/styled/styled.spec.tsx
index a30508b48ab613..ca07dff4789580 100644
--- a/packages/mui-styles/src/styled/styled.spec.tsx
+++ b/packages/mui-styles/src/styled/styled.spec.tsx
@@ -7,8 +7,13 @@ function themeTest() {
     value: number;
     theme: { palette: { primary: string } };
   }) => ({});
-  const Component: React.FC<{ value: number }> = () => null;
-  const ComponentWithTheme: React.FC<{ theme: { zIndex: { [k: string]: number } } }> = () => null;
+  const Component: React.FC<{ value: number }> = function Component() {
+    return null;
+  };
+  const ComponentWithTheme: React.FC<{ theme: { zIndex: { [k: string]: number } } }> =
+    function ComponentWithTheme() {
+      return null;
+    };
 
   const ComponentStyled = styled(Component)(style);
   const ComponentStyledWithTheme = styled(Component)(styleWithTheme);
@@ -35,7 +40,9 @@ function themeTest() {
 
   const ComponentWithOptionalTheme: React.FC<{
     theme?: { zIndex: { [k: string]: number } };
-  }> = () => null;
+  }> = function ComponentWithOptionalTheme() {
+    return null;
+  };
   const ComponentWithOptionalThemeStyledWithTheme = styled(ComponentWithOptionalTheme)(
     styleWithTheme,
   );
diff --git a/packages/mui-styles/src/useThemeVariants/useThemeVariants.test.js b/packages/mui-styles/src/useThemeVariants/useThemeVariants.test.js
index 257fe76d7e50fe..2425bd3fcd25cb 100644
--- a/packages/mui-styles/src/useThemeVariants/useThemeVariants.test.js
+++ b/packages/mui-styles/src/useThemeVariants/useThemeVariants.test.js
@@ -9,11 +9,11 @@ import withStyles from '../withStyles';
 describe('useThemeVariants', () => {
   const { render } = createRenderer();
 
-  const ComponentInternal = (props) => {
+  function ComponentInternal(props) {
     const { className, ...other } = props;
     const themeVariantsClasses = useThemeVariants(props, 'Test');
     return <div className={`${themeVariantsClasses} ${className}`} {...other} />;
-  };
+  }
 
   const Component = withStyles({}, { name: 'Test' })(ComponentInternal);
 
diff --git a/packages/mui-styles/src/withStyles/withStyles.test.js b/packages/mui-styles/src/withStyles/withStyles.test.js
index bd0b18a900f62e..e7835664fe2852 100644
--- a/packages/mui-styles/src/withStyles/withStyles.test.js
+++ b/packages/mui-styles/src/withStyles/withStyles.test.js
@@ -17,7 +17,9 @@ describe('withStyles', () => {
   const { render } = createRenderer({ strict: false });
 
   it('hoist statics', () => {
-    const Test = () => null;
+    function Test() {
+      return null;
+    }
     Test.someStatic = 'will not get hoisted';
     const TestWithStyles = withStyles({})(Test);
     expect(TestWithStyles.someStatic).to.equal(Test.someStatic);
@@ -60,7 +62,9 @@ describe('withStyles', () => {
   });
 
   it('should forward the props', () => {
-    const Test = (props) => <div>{props.foo}</div>;
+    function Test(props) {
+      return <div>{props.foo}</div>;
+    }
     Test.propTypes = {
       foo: PropTypes.any,
     };
@@ -72,7 +76,9 @@ describe('withStyles', () => {
   });
 
   it('should work with no theme', () => {
-    const Test = (props) => <div>{props.foo}</div>;
+    function Test(props) {
+      return <div>{props.foo}</div>;
+    }
     Test.propTypes = {
       foo: PropTypes.any,
     };
@@ -119,7 +125,9 @@ describe('withStyles', () => {
     });
 
     it('should supply correct props to jss callbacks', () => {
-      const MyComp = () => <div />;
+      function MyComp() {
+        return <div />;
+      }
       MyComp.defaultProps = {
         myDefaultProp: 111,
       };
@@ -315,7 +323,9 @@ describe('withStyles', () => {
       const StyledComponent1 = withStyles({ root: { padding: 1 } })(a);
       const fooo = ({ classes }) => <div className={classes.root} data-testid="fooo" />;
       const StyledComponent2 = withStyles({ root: { padding: 1 } })(fooo);
-      const AppFrame = ({ classes }) => <div className={classes.root} data-testid="AppFrame" />;
+      function AppFrame({ classes }) {
+        return <div className={classes.root} data-testid="AppFrame" />;
+      }
       AppFrame.displayName = 'AppLayout';
       const StyledComponent3 = withStyles({ root: { padding: 1 } })(AppFrame);
 
diff --git a/packages/mui-styles/src/withTheme/withTheme.test.js b/packages/mui-styles/src/withTheme/withTheme.test.js
index ae54e232ac6a11..3f37b145a52713 100644
--- a/packages/mui-styles/src/withTheme/withTheme.test.js
+++ b/packages/mui-styles/src/withTheme/withTheme.test.js
@@ -32,7 +32,9 @@ describe('withTheme', () => {
   });
 
   it('hoist statics', () => {
-    const Test = () => null;
+    function Test() {
+      return null;
+    }
     Test.someStatic = 'will not get hoisted';
     const TestWithTheme = withTheme(Test);
     expect(TestWithTheme.someStatic).to.equal(Test.someStatic);
diff --git a/packages/mui-styles/test/styles.spec.tsx b/packages/mui-styles/test/styles.spec.tsx
index bb298d53e41b52..9b3a4e0c059a0b 100644
--- a/packages/mui-styles/test/styles.spec.tsx
+++ b/packages/mui-styles/test/styles.spec.tsx
@@ -36,7 +36,9 @@ const StyledExampleOne = withStyles(simpleStyles)(({ classes, text }: SimpleComp
 // Example 2
 const SimpleComponent: React.FunctionComponent<
   SimpleComponentProps & WithStyles<typeof simpleStyles>
-> = ({ classes, text }) => <div className={classes.root}>{text}</div>;
+> = function SimpleComponent({ classes, text }) {
+  return <div className={classes.root}>{text}</div>;
+};
 
 const StyledExampleTwo = withStyles(simpleStyles)(SimpleComponent);
 <StyledExampleTwo text="I am styled!" />;
@@ -53,7 +55,9 @@ const styleRule = createStyles({
 
 const ComponentWithChildren: React.FunctionComponent<
   WithStyles<typeof simpleStyles> & { children?: React.ReactNode }
-> = ({ classes, children }) => <div className={classes.root}>{children}</div>;
+> = function ComponentWithChildren({ classes, children }) {
+  return <div className={classes.root}>{children}</div>;
+};
 
 const StyledExampleThree = withStyles(styleRule)(ComponentWithChildren);
 <StyledExampleThree />;
@@ -320,10 +324,14 @@ withStyles((theme) =>
 
   // explicit not but with "Property 'children' is missing in type 'ValidationMap<Props>'".
   // which is not helpful
-  const StatelessComponent: React.FunctionComponent<Props> = (props) => null;
+  const StatelessComponent: React.FunctionComponent<Props> = function StatelessComponent(props) {
+    return null;
+  };
   const StatelessComponentWithStyles: React.FunctionComponent<
     Props & WithStyles<typeof simpleStyles>
-  > = (props) => null;
+  > = function StatelessComponentWithStyles(props) {
+    return null;
+  };
   // @ts-expect-error
   withStyles(simpleStyles)(StatelessComponent);
   // @ts-expect-error
diff --git a/packages/mui-system/src/createStyled.test.js b/packages/mui-system/src/createStyled.test.js
index 1a6a781bf64272..05f3c9913d8b03 100644
--- a/packages/mui-system/src/createStyled.test.js
+++ b/packages/mui-system/src/createStyled.test.js
@@ -156,7 +156,7 @@ describe('createStyled', () => {
       slot: 'Icon',
       overridesResolver: (props, styles) => styles.icon,
     })({});
-    const Button = ({ children, startIcon, endIcon, color = 'primary', ...props }) => {
+    function Button({ children, startIcon, endIcon, color = 'primary', ...props }) {
       const ownerState = { startIcon, endIcon, color, ...props };
       return (
         <ButtonRoot ownerState={ownerState}>
@@ -165,7 +165,7 @@ describe('createStyled', () => {
           {endIcon && <ButtonIcon ownerState={ownerState}>{endIcon}</ButtonIcon>}
         </ButtonRoot>
       );
-    };
+    }
 
     it('spread ownerState as props to the slot styleOverrides', () => {
       const finalTheme = createTheme({
@@ -366,7 +366,9 @@ describe('createStyled', () => {
     it('able to pass props to `as` styled component', () => {
       const styled = createStyled({});
       const ChildRoot = styled('div')({});
-      const Child = ({ component }) => <ChildRoot as={component}>content</ChildRoot>;
+      function Child({ component }) {
+        return <ChildRoot as={component}>content</ChildRoot>;
+      }
       const Button = styled('button')({});
       const { container } = render(<Button as={Child} component="span" />);
 
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
index 5ff48e456d8c25..aa925d6a4fe02e 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
@@ -55,10 +55,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Consumer = () => {
+      function Consumer() {
         const { colorScheme } = useColorScheme();
         return <div data-testid="current-color-scheme">{colorScheme}</div>;
-      };
+      }
       render(
         <CssVarsProvider>
           <Consumer />
@@ -75,10 +75,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div data-testid={`text`}>{theme.getColorSchemeSelector('light')}</div>;
-      };
+      }
       render(
         <CssVarsProvider attribute="data-custom-color-scheme">
           <Text />
@@ -100,10 +100,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Consumer = () => {
+      function Consumer() {
         const { allColorSchemes } = useColorScheme();
         return <div data-testid="all-colorSchemes">{allColorSchemes.join(',')}</div>;
-      };
+      }
       const { rerender } = render(
         <CssVarsProvider>
           <Consumer />
@@ -132,7 +132,7 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Consumer = () => {
+      function Consumer() {
         const { colorScheme, setColorScheme } = useColorScheme();
         return (
           <div>
@@ -140,7 +140,7 @@ describe('createCssVarsProvider', () => {
             <button onClick={() => setColorScheme('dark')}>change to dark</button>
           </div>
         );
-      };
+      }
       render(
         <CssVarsProvider>
           <Consumer />
@@ -160,10 +160,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Consumer = () => {
+      function Consumer() {
         const { setColorScheme } = useColorScheme();
         return <button onClick={() => setColorScheme('foo')}>change to dark</button>;
-      };
+      }
 
       render(
         <CssVarsProvider>
@@ -194,10 +194,10 @@ describe('createCssVarsProvider', () => {
         defaultColorScheme: 'light',
         shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
       });
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         return <div data-testid="h1">{theme.vars.typography.h1 || ''}</div>;
-      };
+      }
       expect(() =>
         render(
           <CssVarsProvider>
@@ -225,7 +225,7 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         return (
           <div>
@@ -233,7 +233,7 @@ describe('createCssVarsProvider', () => {
             <div>{theme.vars.palette.grey || ''}</div>
           </div>
         );
-      };
+      }
       render(
         <CssVarsProvider>
           <Consumer />
@@ -256,7 +256,7 @@ describe('createCssVarsProvider', () => {
           },
           disableTransitionOnChange: true,
         });
-        const Consumer = () => {
+        function Consumer() {
           const { mode, setMode } = useColorScheme();
           return (
             <div>
@@ -264,7 +264,7 @@ describe('createCssVarsProvider', () => {
               <button onClick={() => setMode('dark')}>change to dark</button>;
             </div>
           );
-        };
+        }
         render(
           <CssVarsProvider>
             <Consumer />
@@ -297,7 +297,7 @@ describe('createCssVarsProvider', () => {
           },
           disableTransitionOnChange: true,
         });
-        const Consumer = () => {
+        function Consumer() {
           const { colorScheme, setColorScheme } = useColorScheme();
           return (
             <div>
@@ -305,7 +305,7 @@ describe('createCssVarsProvider', () => {
               <button onClick={() => setColorScheme('dark')}>change to dark</button>;
             </div>
           );
-        };
+        }
         render(
           <CssVarsProvider>
             <Consumer />
@@ -335,7 +335,7 @@ describe('createCssVarsProvider', () => {
           defaultColorScheme: 'light',
           disableTransitionOnChange: false,
         });
-        const Consumer = () => {
+        function Consumer() {
           const { mode, setMode } = useColorScheme();
           return (
             <div>
@@ -343,7 +343,7 @@ describe('createCssVarsProvider', () => {
               <button onClick={() => setMode('dark')}>change to dark</button>;
             </div>
           );
-        };
+        }
         render(
           <CssVarsProvider>
             <Consumer />
@@ -368,7 +368,7 @@ describe('createCssVarsProvider', () => {
           defaultColorScheme: 'light',
           disableTransitionOnChange: false,
         });
-        const Consumer = () => {
+        function Consumer() {
           const { colorScheme, setColorScheme } = useColorScheme();
           return (
             <div>
@@ -376,7 +376,7 @@ describe('createCssVarsProvider', () => {
               <button onClick={() => setColorScheme('dark')}>change to dark</button>;
             </div>
           );
-        };
+        }
         render(
           <CssVarsProvider>
             <Consumer />
@@ -452,7 +452,7 @@ describe('createCssVarsProvider', () => {
       },
       defaultColorScheme: 'light',
     });
-    const Consumer = () => {
+    function Consumer() {
       const { mode, setMode } = useColorScheme();
       return (
         <div>
@@ -460,7 +460,7 @@ describe('createCssVarsProvider', () => {
           <button onClick={() => setMode('dark')}>change to dark</button>
         </div>
       );
-    };
+    }
     it('should save mode to localStorage', () => {
       render(
         <CssVarsProvider>
@@ -545,10 +545,10 @@ describe('createCssVarsProvider', () => {
       },
       defaultColorScheme: 'light',
     });
-    const Color = () => {
+    function Color() {
       const theme = useTheme();
       return <div data-testid="color">{theme.vars.color}</div>;
-    };
+    }
     it('use default color scheme if the storage value does not exist', () => {
       storage[DEFAULT_MODE_STORAGE_KEY] = 'unknown';
 
@@ -573,10 +573,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Text = ({ scale = 'md' }) => {
+      function Text({ scale = 'md' }) {
         const theme = useTheme();
         return <div data-testid={`text-${scale}`}>{theme.vars.fontSize[scale]}</div>;
-      };
+      }
       render(
         <CssVarsProvider theme={{ fontSize: { sm: '0.75rem' } }}>
           <Text scale="md" />
@@ -601,7 +601,7 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Swatch = () => {
+      function Swatch() {
         const theme = useTheme();
         return (
           <div>
@@ -609,7 +609,7 @@ describe('createCssVarsProvider', () => {
             <div data-testid="swatch-color-value">{theme.palette.color}</div>
           </div>
         );
-      };
+      }
       const comfortColor = '#007FFF';
       render(
         <CssVarsProvider
@@ -645,7 +645,7 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Swatch = () => {
+      function Swatch() {
         const theme = useTheme();
         return (
           <div>
@@ -653,7 +653,7 @@ describe('createCssVarsProvider', () => {
             <div data-testid="swatch-bgcolor">{theme.vars.palette.bgcolor}</div>
           </div>
         );
-      };
+      }
       render(
         <CssVarsProvider
           theme={{ colorSchemes: { light: { palette: { color: '#000000', bgcolor: '#ffffff' } } } }}
@@ -680,10 +680,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Consumer = () => {
+      function Consumer() {
         const theme = useTheme();
         return <div>{Object.keys(theme.colorSchemes).join(', ')}</div>;
-      };
+      }
       const { container } = render(
         <CssVarsProvider theme={{ colorSchemes: { light: {}, dark: {}, dim: {} } }}>
           <Consumer />
@@ -700,10 +700,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div data-testid={`text`}>{theme.vars.fontSize}</div>;
-      };
+      }
       render(
         <CssVarsProvider
           theme={{
@@ -726,11 +726,11 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
 
         return <div data-testid={`text`}>{theme.vars.components}</div>;
-      };
+      }
       render(
         <CssVarsProvider>
           <Text />
@@ -747,10 +747,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Text = () => {
+      function Text() {
         const { mode } = useColorScheme();
         return <div>{mode}</div>;
-      };
+      }
       const { container } = render(
         <CssVarsProvider defaultMode="dark">
           <Text />
@@ -766,10 +766,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Text = () => {
+      function Text() {
         const { colorScheme } = useColorScheme();
         return <div>{colorScheme}</div>;
-      };
+      }
       const { container } = render(
         <CssVarsProvider theme={{ colorSchemes: { paper: {} } }} defaultColorScheme="paper">
           <Text />
@@ -785,10 +785,10 @@ describe('createCssVarsProvider', () => {
         },
         defaultColorScheme: 'light',
       });
-      const Text = () => {
+      function Text() {
         const { colorScheme } = useColorScheme();
         return <div>{colorScheme}</div>;
-      };
+      }
       const { container } = render(
         <CssVarsProvider
           theme={{ colorSchemes: { paper: {} } }}
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
index 80fbcfe8adee89..04aa5951b61a48 100644
--- a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
@@ -96,14 +96,14 @@ describe('useCurrentColorScheme', () => {
 
   describe('Client', () => {
     it('has default mode=`light`', () => {
-      const Data = () => {
+      function Data() {
         const data = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
           supportedColorSchemes: ['light', 'dark'],
         });
         return <div>{JSON.stringify(data)}</div>;
-      };
+      }
       const { container } = render(<Data />);
 
       expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
@@ -115,7 +115,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('defaultMode=`dark`', () => {
-      const Data = () => {
+      function Data() {
         const data = useCurrentColorScheme({
           defaultMode: 'dark',
           defaultLightColorScheme: 'light',
@@ -123,7 +123,7 @@ describe('useCurrentColorScheme', () => {
           supportedColorSchemes: ['light', 'dark'],
         });
         return <div>{JSON.stringify(data)}</div>;
-      };
+      }
       const { container } = render(<Data />);
 
       expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
@@ -135,7 +135,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('defaultMode=`system`', () => {
-      const Data = () => {
+      function Data() {
         const data = useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -143,7 +143,7 @@ describe('useCurrentColorScheme', () => {
           supportedColorSchemes: ['light', 'dark'],
         });
         return <div>{JSON.stringify(data)}</div>;
-      };
+      }
       const { container } = render(<Data />);
 
       expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
@@ -168,14 +168,14 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('change to `dark` mode', () => {
-      const Data = () => {
+      function Data() {
         const { setMode, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
           supportedColorSchemes: ['light', 'dark'],
         });
         return <button onClick={() => setMode('dark')}>{JSON.stringify(data)}</button>;
-      };
+      }
       const { container } = render(<Data />);
 
       fireEvent.click(container.firstChild);
@@ -190,14 +190,14 @@ describe('useCurrentColorScheme', () => {
 
     it('change to `system` mode', () => {
       window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark'
-      const Data = () => {
+      function Data() {
         const { setMode, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
           supportedColorSchemes: ['light', 'dark'],
         });
         return <button onClick={() => setMode('system')}>{JSON.stringify(data)}</button>;
-      };
+      }
       const { container } = render(<Data />);
 
       fireEvent.click(container.firstChild);
@@ -212,7 +212,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('reset mode', () => {
-      const Data = () => {
+      function Data() {
         const { setMode, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
@@ -225,7 +225,7 @@ describe('useCurrentColorScheme', () => {
             <button data-testid="reset" onClick={() => setMode(null)} />
           </div>
         );
-      };
+      }
       render(<Data />);
 
       fireEvent.click(screen.getByTestId('dark'));
@@ -241,14 +241,14 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('change colorScheme when mode is `light` should change `lightColorScheme`', () => {
-      const Data = () => {
+      function Data() {
         const { setColorScheme, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
           supportedColorSchemes: ['light', 'paper', 'dark'],
         });
         return <button onClick={() => setColorScheme('paper')}>{JSON.stringify(data)}</button>;
-      };
+      }
       const { container } = render(<Data />);
 
       fireEvent.click(container.firstChild);
@@ -263,7 +263,7 @@ describe('useCurrentColorScheme', () => {
 
     it('change colorScheme when mode is `system` should look at systemMode', () => {
       window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark'
-      const Data = () => {
+      function Data() {
         const { setColorScheme, ...data } = useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -271,7 +271,7 @@ describe('useCurrentColorScheme', () => {
           supportedColorSchemes: ['light', 'paper', 'dark', 'dim'],
         });
         return <button onClick={() => setColorScheme('dim')}>{JSON.stringify(data)}</button>;
-      };
+      }
       const { container } = render(<Data />);
 
       fireEvent.click(container.firstChild);
@@ -286,7 +286,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('change both light & dark color scheme at the same time', () => {
-      const Data = () => {
+      function Data() {
         const { setColorScheme, ...data } = useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -298,7 +298,7 @@ describe('useCurrentColorScheme', () => {
             {JSON.stringify(data)}
           </button>
         );
-      };
+      }
       const { container } = render(<Data />);
 
       fireEvent.click(container.firstChild);
@@ -325,7 +325,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('change only the mode specified as key', () => {
-      const Data = () => {
+      function Data() {
         const { setColorScheme, ...data } = useCurrentColorScheme({
           defaultMode: 'light',
           defaultLightColorScheme: 'light',
@@ -339,7 +339,7 @@ describe('useCurrentColorScheme', () => {
             <button onClick={() => setColorScheme({ dark: 'dim' })}>second</button>
           </div>
         );
-      };
+      }
       const { getByText, getByTestId } = render(<Data />);
 
       fireEvent.click(getByText('first'));
@@ -362,7 +362,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('able to setMode and setColorScheme in the same event', () => {
-      const Data = () => {
+      function Data() {
         const { setColorScheme, setMode, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
@@ -378,7 +378,7 @@ describe('useCurrentColorScheme', () => {
             {JSON.stringify(data)}
           </button>
         );
-      };
+      }
       const { container } = render(<Data />);
 
       fireEvent.click(container.firstChild);
@@ -392,7 +392,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('reset colorScheme', () => {
-      const Data = () => {
+      function Data() {
         const { setColorScheme, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
@@ -405,7 +405,7 @@ describe('useCurrentColorScheme', () => {
             <button data-testid="reset" onClick={() => setColorScheme(null)} />
           </div>
         );
-      };
+      }
       render(<Data />);
 
       fireEvent.click(screen.getByTestId('dark'));
@@ -421,7 +421,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('reset light & dark colorScheme', () => {
-      const Data = () => {
+      function Data() {
         const { setColorScheme, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
@@ -440,7 +440,7 @@ describe('useCurrentColorScheme', () => {
             />
           </div>
         );
-      };
+      }
       render(<Data />);
 
       fireEvent.click(screen.getByTestId('dark'));
@@ -458,7 +458,7 @@ describe('useCurrentColorScheme', () => {
 
   describe('Storage', () => {
     it('save dark mode', () => {
-      const Data = () => {
+      function Data() {
         const { setMode, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
@@ -473,7 +473,7 @@ describe('useCurrentColorScheme', () => {
             {JSON.stringify(data)}
           </button>
         );
-      };
+      }
       const { container } = render(<Data />);
 
       fireEvent.click(container.firstChild);
@@ -484,7 +484,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('save system mode', () => {
-      const Data = () => {
+      function Data() {
         useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -492,7 +492,7 @@ describe('useCurrentColorScheme', () => {
           supportedColorSchemes: ['light', 'dark'],
         });
         return null;
-      };
+      }
       render(<Data />);
       expect(global.localStorage.setItem.calledWith(DEFAULT_MODE_STORAGE_KEY, 'system')).to.equal(
         true,
@@ -500,7 +500,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('save lightColorScheme and darkColorScheme', () => {
-      const Data = () => {
+      function Data() {
         const { setMode, setColorScheme, ...data } = useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -517,7 +517,7 @@ describe('useCurrentColorScheme', () => {
             {JSON.stringify(data)}
           </button>
         );
-      };
+      }
       const { container } = render(<Data />);
 
       fireEvent.click(container.firstChild);
@@ -532,14 +532,14 @@ describe('useCurrentColorScheme', () => {
 
     it('use mode from localStorage if exists', () => {
       storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
-      const Data = () => {
+      function Data() {
         const { setMode, setColorScheme, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
           supportedColorSchemes: ['light', 'dark'],
         });
         return <div>{JSON.stringify(data)}</div>;
-      };
+      }
       const { container } = render(<Data />);
 
       expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
@@ -553,14 +553,14 @@ describe('useCurrentColorScheme', () => {
     it('use mode & colorScheme from localStorage if exists', () => {
       storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
       storage[`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-dark`] = 'dim';
-      const Data = () => {
+      function Data() {
         const { setMode, setColorScheme, ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
           supportedColorSchemes: ['light', 'dark', 'dim'],
         });
         return <div>{JSON.stringify(data)}</div>;
-      };
+      }
       const { container } = render(<Data />);
 
       expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
@@ -572,14 +572,14 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('storage mode changes from `light` to `dark`', () => {
-      const Data = () => {
+      function Data() {
         const { ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
           supportedColorSchemes: ['light', 'dark'],
         });
         return <button>{JSON.stringify(data)}</button>;
-      };
+      }
       const { container } = render(<Data />);
 
       act(() => {
@@ -596,14 +596,14 @@ describe('useCurrentColorScheme', () => {
 
     it('storage mode changes from `light` to `auto`', () => {
       window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark'
-      const Data = () => {
+      function Data() {
         const { ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
           defaultDarkColorScheme: 'dark',
           supportedColorSchemes: ['light', 'dark'],
         });
         return <button>{JSON.stringify(data)}</button>;
-      };
+      }
       const { container } = render(<Data />);
 
       act(() => {
@@ -621,7 +621,7 @@ describe('useCurrentColorScheme', () => {
 
     it('storage mode is deleted', () => {
       storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
-      const Data = () => {
+      function Data() {
         const { ...data } = useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -629,7 +629,7 @@ describe('useCurrentColorScheme', () => {
           supportedColorSchemes: ['light', 'dark'],
         });
         return <button>{JSON.stringify(data)}</button>;
-      };
+      }
       const { container } = render(<Data />);
 
       act(() => {
@@ -646,7 +646,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('storage lightColorScheme & darkColorScheme changes', () => {
-      const Data = () => {
+      function Data() {
         const { ...data } = useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -654,7 +654,7 @@ describe('useCurrentColorScheme', () => {
           supportedColorSchemes: ['light', 'dark', 'light-dim', 'dark-dim'],
         });
         return <button>{JSON.stringify(data)}</button>;
-      };
+      }
       const { container } = render(<Data />);
 
       act(() => {
@@ -693,7 +693,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('reset mode in storage', () => {
-      const Data = () => {
+      function Data() {
         const { setMode } = useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -706,7 +706,7 @@ describe('useCurrentColorScheme', () => {
             <button data-testid="reset" onClick={() => setMode(null)} />
           </div>
         );
-      };
+      }
       render(<Data />);
 
       fireEvent.click(screen.getByTestId('dark'));
@@ -719,7 +719,7 @@ describe('useCurrentColorScheme', () => {
     });
 
     it('reset color scheme in storage', () => {
-      const Data = () => {
+      function Data() {
         const { setColorScheme } = useCurrentColorScheme({
           defaultMode: 'system',
           defaultLightColorScheme: 'light',
@@ -732,7 +732,7 @@ describe('useCurrentColorScheme', () => {
             <button data-testid="reset" onClick={() => setColorScheme(null)} />
           </div>
         );
-      };
+      }
       render(<Data />);
 
       fireEvent.click(screen.getByTestId('dark'));
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.spec.tsx b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.spec.tsx
index 4884433c795bcf..5fe77a500ebb2f 100644
--- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.spec.tsx
+++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.spec.tsx
@@ -5,7 +5,9 @@ interface Theme {
   color: string;
 }
 
-const Text = (props: { sx?: SxProps<Theme> }) => null;
+function Text(props: { sx?: SxProps<Theme> }) {
+  return null;
+}
 
 // object
 <Text sx={{ color: '#121212' }} />;
diff --git a/packages/mui-system/src/styled.test.js b/packages/mui-system/src/styled.test.js
index f88a5c540489b0..444aaa9bf1917c 100644
--- a/packages/mui-system/src/styled.test.js
+++ b/packages/mui-system/src/styled.test.js
@@ -568,8 +568,8 @@ describe('styled', () => {
       const { container } = render(<Component>Test</Component>);
 
       const classList = Array.from(container.firstChild.classList);
-      const regExp = new RegExp(`.*-MuiComponent-slot$`);
-      const regExpSC = new RegExp(`MuiComponent-slot.*`);
+      const regExp = /.*-MuiComponent-slot$/;
+      const regExpSC = /MuiComponent-slot.*/;
       let containsValidClass = false;
 
       classList.forEach((className) => {
@@ -593,8 +593,8 @@ describe('styled', () => {
       const { container } = render(<Component>Test</Component>);
 
       const classList = Array.from(container.firstChild.classList);
-      const regExp = new RegExp(`.*-MuiComponent-root$`);
-      const regExpSC = new RegExp(`MuiComponent-root.*`);
+      const regExp = /.*-MuiComponent-root$/;
+      const regExpSC = /MuiComponent-root.*/;
       let containsValidClass = false;
 
       classList.forEach((className) => {
diff --git a/packages/mui-utils/src/chainpropTypes.spec.tsx b/packages/mui-utils/src/chainpropTypes.spec.tsx
index 7a7cb1c463227c..07c816d6d1d3bc 100644
--- a/packages/mui-utils/src/chainpropTypes.spec.tsx
+++ b/packages/mui-utils/src/chainpropTypes.spec.tsx
@@ -6,7 +6,7 @@ interface ChainProps {
   foo?: boolean;
 }
 
-const Chain: React.FC<ChainProps> = (props) => {
+const Chain: React.FC<ChainProps> = function Chain(props) {
   return <div />;
 };
 
diff --git a/packages/mui-utils/src/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef.test.tsx
index 8e33aa27668c7d..b8cd665a826eda 100644
--- a/packages/mui-utils/src/elementAcceptingRef.test.tsx
+++ b/packages/mui-utils/src/elementAcceptingRef.test.tsx
@@ -130,7 +130,9 @@ describe('elementAcceptingRef', () => {
     });
 
     it('rejects function components', () => {
-      const Component = () => null;
+      function Component() {
+        return null;
+      }
 
       assertFail(
         <Component />,
diff --git a/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx b/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx
index 8e1c2d6367268f..a39ec1610fcbee 100644
--- a/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx
+++ b/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx
@@ -122,7 +122,9 @@ describe('elementTypeAcceptingRef', () => {
     }
 
     it('rejects function components', () => {
-      const Component = () => null;
+      function Component() {
+        return null;
+      }
 
       assertFail(Component, 'Did you accidentally provide a plain function component instead?');
     });
diff --git a/packages/mui-utils/src/getDisplayName.test.tsx b/packages/mui-utils/src/getDisplayName.test.tsx
index 9da9650a7b2e2b..4d30daac79c0fe 100644
--- a/packages/mui-utils/src/getDisplayName.test.tsx
+++ b/packages/mui-utils/src/getDisplayName.test.tsx
@@ -24,7 +24,9 @@ describe('utils/getDisplayName.js', () => {
         return <div />;
       }
 
-      const AndAnotherComponent = () => <div />;
+      function AndAnotherComponent() {
+        return <div />;
+      }
 
       const AnonymousForwardRefComponent = React.forwardRef<HTMLDivElement>((props, ref) => (
         <div {...props} ref={ref} />
diff --git a/packages/mui-utils/src/requirePropFactory.test.js b/packages/mui-utils/src/requirePropFactory.test.js
index 743bf0ee7252c6..b36466f49047dc 100644
--- a/packages/mui-utils/src/requirePropFactory.test.js
+++ b/packages/mui-utils/src/requirePropFactory.test.js
@@ -114,7 +114,9 @@ describe('requirePropFactory', () => {
       });
 
       it('should work with chained proptypes coming from the default props', () => {
-        const Test = () => null;
+        function Test() {
+          return null;
+        }
         Test.propTypes = {
           test: PropTypes.string,
         };
@@ -140,7 +142,9 @@ describe('requirePropFactory', () => {
       });
 
       it('should validate default prop types coming from the component', () => {
-        const Test = () => null;
+        function Test() {
+          return null;
+        }
         Test.propTypes = {
           test: PropTypes.string,
         };
diff --git a/packages/mui-utils/src/useId.test.js b/packages/mui-utils/src/useId.test.js
index a69bd9b5228f75..ec238bdfaf932b 100644
--- a/packages/mui-utils/src/useId.test.js
+++ b/packages/mui-utils/src/useId.test.js
@@ -7,10 +7,10 @@ describe('useId', () => {
   const { render, renderToString } = createRenderer();
 
   it('returns the provided ID', () => {
-    const TestComponent = ({ id: idProp }) => {
+    function TestComponent({ id: idProp }) {
       const id = useId(idProp);
       return <span data-testid="target" id={id} />;
-    };
+    }
     const { hydrate } = renderToString(<TestComponent id="some-id" />);
     const { setProps } = hydrate();
 
@@ -22,10 +22,10 @@ describe('useId', () => {
   });
 
   it("generates an ID if one isn't provided", () => {
-    const TestComponent = ({ id: idProp }) => {
+    function TestComponent({ id: idProp }) {
       const id = useId(idProp);
       return <span data-testid="target" id={id} />;
-    };
+    }
     const { hydrate } = renderToString(<TestComponent />);
     const { setProps } = hydrate();
 
@@ -86,10 +86,10 @@ describe('useId', () => {
     if (React.useId === undefined) {
       this.skip();
     }
-    const TestComponent = () => {
+    function TestComponent() {
       const id = useId();
       return <span data-testid="target" id={id} />;
-    };
+    }
     renderToString(<TestComponent />);
 
     expect(screen.getByTestId('target').id).not.to.equal('');
diff --git a/test/utils/until.test.js b/test/utils/until.test.js
index a13e4426372a3a..ee9edc05292249 100644
--- a/test/utils/until.test.js
+++ b/test/utils/until.test.js
@@ -4,8 +4,13 @@ import PropTypes from 'prop-types';
 import { shallow } from 'enzyme';
 import until from './until';
 
-const Div = () => <div />;
-const hoc = (Component) => () => <Component />;
+function Div() {
+  return <div />;
+}
+const hoc = (Component) =>
+  function Wrapper() {
+    return <Component />;
+  };
 
 describe('until', () => {
   it('shallow renders the current wrapper one level deep', () => {
@@ -64,11 +69,13 @@ describe('until', () => {
   });
 
   it('shallow renders non-root wrappers', () => {
-    const Container = () => (
-      <div>
-        <Div />
-      </div>
-    );
+    function Container() {
+      return (
+        <div>
+          <Div />
+        </div>
+      );
+    }
     const wrapper = until.call(shallow(<Container />).find(Div));
     expect(wrapper.contains(<div />)).to.equal(true);
   });