diff --git a/package.json b/package.json
index c837fd2a54a357..0788a8e265b1ae 100644
--- a/package.json
+++ b/package.json
@@ -185,6 +185,7 @@
     "karma-firefox-launcher": "^2.1.3",
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.4.0",
+    "karma-spec-reporter": "^0.0.36",
     "karma-webpack": "^5.0.0",
     "lerna": "^8.2.2",
     "lodash": "^4.17.21",
diff --git a/packages-internal/test-utils/src/createRenderer.tsx b/packages-internal/test-utils/src/createRenderer.tsx
index f6f9cfa64cf367..98b75680153075 100644
--- a/packages-internal/test-utils/src/createRenderer.tsx
+++ b/packages-internal/test-utils/src/createRenderer.tsx
@@ -18,7 +18,6 @@ import {
 import { userEvent } from '@testing-library/user-event';
 import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
-import { useFakeTimers } from 'sinon';
 import reactMajor from './reactMajor';
 
 interface Interaction {
@@ -346,149 +345,25 @@ const isVitest =
   // VITEST_BROWSER_DEBUG is present on vitest in browser mode.
   typeof process.env.VITEST_BROWSER_DEBUG !== 'undefined';
 
-function createVitestClock(
-  defaultMode: 'fake' | 'real',
-  config: ClockConfig,
-  options: Exclude<Parameters<typeof useFakeTimers>[0], number | Date>,
-  vi: any,
-): Clock {
-  if (defaultMode === 'fake') {
-    beforeEach(() => {
-      vi.useFakeTimers(options);
-      if (config) {
-        vi.setSystemTime(config);
-      }
-    });
-    afterEach(() => {
-      vi.useRealTimers();
-    });
-  } else {
-    beforeEach(() => {
-      if (config) {
-        vi.setSystemTime(config);
-      }
-    });
-    afterEach(() => {
-      vi.useRealTimers();
-    });
-  }
-
+function createClock(): Clock {
   return {
-    withFakeTimers: () => {
-      beforeEach(() => {
-        vi.useFakeTimers(options);
-      });
-      afterEach(() => {
-        vi.useRealTimers();
-      });
-    },
-    runToLast: () => {
-      traceSync('runToLast', () => {
-        rtlAct(() => {
-          vi.runOnlyPendingTimers();
-        });
-      });
-    },
-    isReal() {
-      return !vi.isFakeTimers();
-    },
-    restore() {
-      vi.useRealTimers();
-    },
-    tick(timeoutMS: number) {
-      traceSync('tick', () => {
-        rtlAct(() => {
-          vi.advanceTimersByTime(timeoutMS);
-        });
-      });
+    tick() {
+      throw new Error('Unsupported');
     },
     runAll() {
-      traceSync('runAll', () => {
-        rtlAct(() => {
-          vi.runAllTimers();
-        });
-      });
-    },
-  };
-}
-
-function createClock(
-  defaultMode: 'fake' | 'real',
-  config: ClockConfig,
-  options: Exclude<Parameters<typeof useFakeTimers>[0], number | Date>,
-  vi: any,
-): Clock {
-  if (isVitest) {
-    return createVitestClock(defaultMode, config, options, vi);
-  }
-
-  let clock: ReturnType<typeof useFakeTimers> | null = null;
-
-  let mode = defaultMode;
-
-  beforeEach(() => {
-    if (mode === 'fake') {
-      clock = useFakeTimers({
-        now: config,
-        // useIsFocusVisible schedules a global timer that needs to persist regardless of whether components are mounted or not.
-        // Technically we'd want to reset all modules between tests but we don't have that technology.
-        // In the meantime just continue to clear native timers like with did for the past years when using `sinon` < 8.
-        shouldClearNativeTimers: true,
-        ...options,
-      });
-    }
-  });
-
-  afterEach(() => {
-    clock?.restore();
-    clock = null;
-  });
-
-  return {
-    tick(timeoutMS: number) {
-      if (clock === null) {
-        throw new Error(`Can't advance the real clock. Did you mean to call this on fake clock?`);
-      }
-      traceSync('tick', () => {
-        rtlAct(() => {
-          clock!.tick(timeoutMS);
-        });
-      });
-    },
-    runAll() {
-      if (clock === null) {
-        throw new Error(`Can't advance the real clock. Did you mean to call this on fake clock?`);
-      }
-      traceSync('runAll', () => {
-        rtlAct(() => {
-          clock!.runAll();
-        });
-      });
+      throw new Error('Unsupported');
     },
     runToLast() {
-      if (clock === null) {
-        throw new Error(`Can't advance the real clock. Did you mean to call this on fake clock?`);
-      }
-      traceSync('runToLast', () => {
-        rtlAct(() => {
-          clock!.runToLast();
-        });
-      });
+      throw new Error('Unsupported');
     },
     isReal() {
-      return setTimeout.hasOwnProperty('clock') === false;
+      throw new Error('Unsupported');
     },
     withFakeTimers() {
-      before(() => {
-        mode = 'fake';
-      });
-
-      after(() => {
-        mode = defaultMode;
-      });
+      throw new Error('Unsupported');
     },
     restore() {
-      clock?.restore();
+      throw new Error('Unsupported');
     },
   };
 }
@@ -503,12 +378,6 @@ export interface Renderer {
 }
 
 export interface CreateRendererOptions extends Pick<RenderOptions, 'strict' | 'strictEffects'> {
-  /**
-   * @default 'real'
-   */
-  clock?: 'fake' | 'real';
-  clockConfig?: ClockConfig;
-  clockOptions?: Parameters<typeof createClock>[2];
   /**
    * Vitest needs to be injected because this file is transpiled to commonjs and vitest is an esm module.
    * @default {}
@@ -517,17 +386,11 @@ export interface CreateRendererOptions extends Pick<RenderOptions, 'strict' | 's
 }
 
 export function createRenderer(globalOptions: CreateRendererOptions = {}): Renderer {
-  const {
-    clock: clockMode = 'real',
-    clockConfig,
-    strict: globalStrict = true,
-    strictEffects: globalStrictEffects = globalStrict,
-    vi = (globalThis as any).vi || {},
-    clockOptions,
-  } = globalOptions;
+  const { strict: globalStrict = true, strictEffects: globalStrictEffects = globalStrict } =
+    globalOptions;
   // save stack to re-use in test-hooks
   const { stack: createClientRenderStack } = new Error();
-  const clock = createClock(clockMode, clockConfig, clockOptions, vi);
+  const clock = createClock();
 
   /**
    * Flag whether `createRenderer` was called in a suite i.e. describe() block.
@@ -605,18 +468,6 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
   });
 
   afterEach(() => {
-    if (!clock.isReal()) {
-      const error = new Error(
-        "Can't cleanup before fake timers are restored.\n" +
-          'Be sure to:\n' +
-          '  1. Only use `clock` from `createRenderer`.\n' +
-          '  2. Call `createRenderer` in a suite and not any test hook (for example `beforeEach`) or test itself (for example `it`).',
-      );
-      // Use saved stack otherwise the stack trace will not include the test location.
-      error.stack = createClientRenderStack;
-      throw error;
-    }
-
     cleanup();
     profiler.report();
     profiler = null!;
diff --git a/packages-internal/test-utils/src/focusVisible.ts b/packages-internal/test-utils/src/focusVisible.ts
index 1c6e10b23d1c29..9ef8f4934b5737 100644
--- a/packages-internal/test-utils/src/focusVisible.ts
+++ b/packages-internal/test-utils/src/focusVisible.ts
@@ -1,7 +1,7 @@
 import { act, fireEvent } from './createRenderer';
 
-export default function focusVisible(element: HTMLElement) {
-  act(() => {
+export default async function focusVisible(element: HTMLElement) {
+  await act(async () => {
     element.blur();
     fireEvent.keyDown(document.body, { key: 'Tab' });
     element.focus();
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index b8ff2c801884f9..adb6f340d46e03 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -97,18 +97,18 @@ describe('Joy <Autocomplete />', () => {
   });
 
   describe('combobox', () => {
-    it('should clear the input when blur', () => {
+    it('should clear the input when blur', async () => {
       const { getByRole } = render(<Autocomplete options={[]} />);
       const input = getByRole('combobox') as HTMLInputElement;
 
-      act(() => {
+      await act(async () => {
         input.focus();
         fireEvent.change(document.activeElement!, { target: { value: 'a' } });
       });
 
       expect(input.value).to.equal('a');
 
-      act(() => {
+      await act(async () => {
         (document.activeElement as HTMLElement).blur();
       });
       expect(input.value).to.equal('');
@@ -237,7 +237,7 @@ describe('Joy <Autocomplete />', () => {
   });
 
   describe('prop: limitTags', () => {
-    it('show all items on focus', () => {
+    it('show all items on focus', async () => {
       const { container, getAllByRole, getByRole } = render(
         <Autocomplete
           multiple
@@ -251,7 +251,7 @@ describe('Joy <Autocomplete />', () => {
       // include hidden clear button because JSDOM thinks it's visible
       expect(getAllByRole('button', { hidden: true })).to.have.lengthOf(4);
 
-      act(() => {
+      await act(async () => {
         getByRole('combobox').focus();
       });
       expect(container.textContent).to.equal('onetwothree');
@@ -261,7 +261,7 @@ describe('Joy <Autocomplete />', () => {
       }
     });
 
-    it('show 0 item on close when set 0 to limitTags', () => {
+    it('show 0 item on close when set 0 to limitTags', async () => {
       const { container, getAllByRole, getByRole } = render(
         <Autocomplete
           multiple
@@ -275,7 +275,7 @@ describe('Joy <Autocomplete />', () => {
       // include hidden clear button because JSDOM thinks it's visible
       expect(getAllByRole('button', { hidden: true })).to.have.lengthOf(2);
 
-      act(() => {
+      await act(async () => {
         getByRole('combobox').focus();
       });
       expect(container.textContent).to.equal('onetwothree');
@@ -287,7 +287,7 @@ describe('Joy <Autocomplete />', () => {
   });
 
   describe('prop: filterSelectedOptions', () => {
-    it('when the last item is selected, highlights the new last item', () => {
+    it('when the last item is selected, highlights the new last item', async () => {
       const { getByRole } = render(
         <Autocomplete
           autoFocus
@@ -301,7 +301,7 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.keyDown(textbox, { key: 'ArrowUp' });
       checkHighlightIs(getByRole('listbox'), 'three');
       fireEvent.keyDown(textbox, { key: 'Enter' }); // selects the last option (three)
-      act(() => {
+      await act(async () => {
         textbox.blur();
         textbox.focus(); // opens the listbox again
       });
@@ -310,7 +310,7 @@ describe('Joy <Autocomplete />', () => {
   });
 
   describe('prop: autoSelect', () => {
-    it('should not clear on blur when value does not match any option', () => {
+    it('should not clear on blur when value does not match any option', async () => {
       const handleChange = spy();
       const options = ['one', 'two'];
       render(
@@ -321,7 +321,7 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.change(textbox, { target: { value: 'o' } });
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       fireEvent.change(textbox, { target: { value: 'oo' } });
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
 
@@ -329,7 +329,7 @@ describe('Joy <Autocomplete />', () => {
       expect(handleChange.args[0][1]).to.deep.equal('oo');
     });
 
-    it('should add new value when autoSelect & multiple on blur', () => {
+    it('should add new value when autoSelect & multiple on blur', async () => {
       const handleChange = spy();
       const options = ['one', 'two'];
       render(
@@ -345,7 +345,7 @@ describe('Joy <Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
 
-      act(() => {
+      await act(async () => {
         fireEvent.change(textbox, { target: { value: 't' } });
         fireEvent.keyDown(textbox, { key: 'ArrowDown' });
         textbox.blur();
@@ -355,7 +355,7 @@ describe('Joy <Autocomplete />', () => {
       expect(handleChange.args[0][1]).to.deep.equal(options);
     });
 
-    it('should add new value when autoSelect & multiple & freeSolo on blur', () => {
+    it('should add new value when autoSelect & multiple & freeSolo on blur', async () => {
       const handleChange = spy();
       render(
         <Autocomplete
@@ -369,7 +369,7 @@ describe('Joy <Autocomplete />', () => {
       );
 
       fireEvent.change(document.activeElement!, { target: { value: 'a' } });
-      act(() => {
+      await act(async () => {
         (document.activeElement as HTMLElement).blur();
       });
 
@@ -379,11 +379,11 @@ describe('Joy <Autocomplete />', () => {
   });
 
   describe('prop: multiple', () => {
-    it('should not crash', () => {
+    it('should not crash', async () => {
       const { getByRole } = render(<Autocomplete openOnFocus options={[]} multiple />);
       const input = getByRole('combobox');
 
-      act(() => {
+      await act(async () => {
         input.focus();
         (document.activeElement as HTMLElement).blur();
         input.focus();
@@ -831,29 +831,29 @@ describe('Joy <Autocomplete />', () => {
   });
 
   describe('prop: clearOnBlur', () => {
-    it('should clear on blur', () => {
+    it('should clear on blur', async () => {
       render(<Autocomplete clearOnBlur options={['one', 'two']} autoFocus />);
       const textbox = screen.getByRole('combobox') as HTMLInputElement;
       fireEvent.change(textbox, { target: { value: 'test' } });
       expect((document.activeElement as HTMLInputElement).value).to.equal('test');
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       expect(textbox.value).to.equal('');
     });
 
-    it('should not clear on blur', () => {
+    it('should not clear on blur', async () => {
       render(<Autocomplete clearOnBlur={false} options={['one', 'two']} autoFocus />);
       const textbox = screen.getByRole('combobox') as HTMLInputElement;
       fireEvent.change(textbox, { target: { value: 'test' } });
       expect((document.activeElement as HTMLInputElement).value).to.equal('test');
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       expect(textbox.value).to.equal('test');
     });
 
-    it('should not clear on blur with `multiple` enabled', () => {
+    it('should not clear on blur with `multiple` enabled', async () => {
       render(
         <Autocomplete
           multiple
@@ -866,7 +866,7 @@ describe('Joy <Autocomplete />', () => {
       const textbox = screen.getByRole('combobox') as HTMLInputElement;
       fireEvent.change(textbox, { target: { value: 'test' } });
       expect((document.activeElement as HTMLInputElement).value).to.equal('test');
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       expect(textbox.value).to.equal('test');
@@ -947,7 +947,7 @@ describe('Joy <Autocomplete />', () => {
   });
 
   describe('prop: openOnFocus', () => {
-    it('enables open on input focus', () => {
+    it('enables open on input focus', async () => {
       const { getByRole } = render(
         <Autocomplete options={['one', 'two', 'three']} openOnFocus autoFocus />,
       );
@@ -960,7 +960,7 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.click(textbox);
       expect(textbox).to.have.attribute('aria-expanded', 'false');
 
-      act(() => {
+      await act(async () => {
         (document.activeElement as HTMLElement).blur();
       });
 
@@ -1104,10 +1104,10 @@ describe('Joy <Autocomplete />', () => {
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
     });
 
-    it('should close the popup when disabled is true', () => {
+    it('should close the popup when disabled is true', async () => {
       const { setProps } = render(<Autocomplete options={['one', 'two', 'three']} />);
       const textbox = screen.getByRole('combobox');
-      act(() => {
+      await act(async () => {
         textbox.focus();
       });
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
@@ -1116,12 +1116,12 @@ describe('Joy <Autocomplete />', () => {
       expect(screen.queryByRole('listbox')).to.equal(null);
     });
 
-    it('should not crash when autoSelect & freeSolo are set, text is focused & disabled gets truthy', () => {
+    it('should not crash when autoSelect & freeSolo are set, text is focused & disabled gets truthy', async () => {
       const { setProps } = render(
         <Autocomplete autoSelect freeSolo options={['one', 'two', 'three']} value="one" />,
       );
       const textbox = screen.getByRole('combobox');
-      act(() => {
+      await act(async () => {
         textbox.focus();
       });
       setProps({ disabled: true });
@@ -1180,6 +1180,7 @@ describe('Joy <Autocomplete />', () => {
         { id: '10', text: 'One' },
         { id: '20', text: 'Two' },
       ];
+
       const options = [
         { id: '10', text: 'One' },
         { id: '20', text: 'Two' },
@@ -1235,6 +1236,7 @@ describe('Joy <Autocomplete />', () => {
         { group: 2, value: 'F' },
         { group: 1, value: 'C' },
       ];
+
       expect(() => {
         render(
           <Autocomplete
@@ -1282,7 +1284,7 @@ describe('Joy <Autocomplete />', () => {
   });
 
   describe('prop: options', () => {
-    it('should scroll selected option into view when multiple elements with role as listbox available', function test() {
+    it('should scroll selected option into view when multiple elements with role as listbox available', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
@@ -1304,6 +1306,7 @@ describe('Joy <Autocomplete />', () => {
             }}
             autoFocus
           />
+
           <Select defaultValue="1">
             <Option value="1">1</Option>
             <Option value="2">2</Option>
@@ -1312,7 +1315,7 @@ describe('Joy <Autocomplete />', () => {
       );
       const autocompleteInput = screen.getByTestId('autocomplete-input');
 
-      act(() => {
+      await act(async () => {
         autocompleteInput.focus();
       });
       fireEvent.keyDown(autocompleteInput, { key: 'ArrowDown' });
@@ -1472,6 +1475,7 @@ describe('Joy <Autocomplete />', () => {
           label: 'one',
         },
       ];
+
       const handleChange = spy();
       const { getByRole } = render(
         <Autocomplete onChange={handleChange} openOnFocus options={options} />,
@@ -1580,7 +1584,7 @@ describe('Joy <Autocomplete />', () => {
       expect(textbox.selectionEnd).to.equal(3);
     });
 
-    it('should focus the input when clicking on the open action', () => {
+    it('should focus the input when clicking on the open action', async () => {
       const { getByRole, queryByTitle } = render(
         <Autocomplete value="one" options={['one', 'two']} />,
       );
@@ -1589,7 +1593,7 @@ describe('Joy <Autocomplete />', () => {
       fireEvent.click(textbox);
       expect(textbox).toHaveFocus();
 
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       fireEvent.click(queryByTitle('Open')!);
@@ -1849,7 +1853,7 @@ describe('Joy <Autocomplete />', () => {
       expect(handleChange.args[0][3]).to.deep.equal({ option: options[2] });
     });
 
-    it('provides a reason and details on blur', () => {
+    it('provides a reason and details on blur', async () => {
       const handleChange = spy();
       const options = ['one', 'two', 'three'];
       render(<Autocomplete autoSelect onChange={handleChange} options={options} autoFocus />);
@@ -1857,7 +1861,7 @@ describe('Joy <Autocomplete />', () => {
 
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
 
@@ -1923,6 +1927,7 @@ describe('Joy <Autocomplete />', () => {
               getOptionLabel={(option) => option.name}
               value={value}
             />
+
             <button onClick={() => setValue(options[1])}>Reset</button>
           </React.Fragment>
         );
@@ -2438,14 +2443,14 @@ describe('Joy <Autocomplete />', () => {
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
     });
 
-    it('should focus on input when clicked', () => {
+    it('should focus on input when clicked', async () => {
       render(<Autocomplete readOnly defaultValue="one" options={['one', 'two']} />);
 
       const textbox = screen.getByRole('combobox');
       fireEvent.click(textbox);
       expect(textbox).toHaveFocus();
 
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       fireEvent.click(screen.queryByTitle('Open')!);
@@ -2460,7 +2465,7 @@ describe('Joy <Autocomplete />', () => {
       expect(screen.queryByRole('listbox')).to.equal(null);
     });
 
-    it('should not be able to delete the tag when multiple=true', () => {
+    it('should not be able to delete the tag when multiple=true', async () => {
       const { container } = render(
         <Autocomplete
           readOnly
@@ -2471,7 +2476,7 @@ describe('Joy <Autocomplete />', () => {
       );
 
       const textbox = screen.getByRole('combobox');
-      act(() => {
+      await act(async () => {
         textbox.focus();
       });
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(2);
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.test.tsx b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
index f2a5636cd49926..536f6475434a61 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
@@ -68,12 +68,12 @@ describe('<Checkbox />', () => {
     expect(getByRole('checkbox')).to.have.property('checked', true);
   });
 
-  it('renders a label', () => {
+  it('renders a label', async () => {
     const { getByLabelText, getByRole } = render(<Checkbox label="foo" />);
 
     expect(getByLabelText('foo')).toBeVisible();
 
-    act(() => {
+    await act(async () => {
       getByLabelText('foo').click();
     });
 
@@ -86,11 +86,11 @@ describe('<Checkbox />', () => {
     expect(getByRole('checkbox')).to.have.property('disabled', true);
   });
 
-  it('the Checked state changes after change events', () => {
+  it('the Checked state changes after change events', async () => {
     const { getByRole } = render(<Checkbox defaultChecked />);
 
     // how a user would trigger it
-    act(() => {
+    await act(async () => {
       getByRole('checkbox').click();
       fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
     });
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
index a730b96220c642..6dd113f5e0c9bb 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
+++ b/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
@@ -76,11 +76,11 @@ describe('<ChipDelete />', () => {
   });
 
   describe('Chip onDelete', () => {
-    it('should call onDelete function when backspace, enter or delete is pressed', () => {
+    it('should call onDelete function when backspace, enter or delete is pressed', async () => {
       const handleDelete = spy();
       const { getByRole } = render(<ChipDelete onDelete={handleDelete} onClick={() => {}} />);
       const chipDelete = getByRole('button');
-      act(() => {
+      await act(async () => {
         chipDelete.focus();
       });
       fireEvent.keyDown(chipDelete, { key: 'Backspace' });
@@ -90,13 +90,13 @@ describe('<ChipDelete />', () => {
       expect(handleDelete.callCount).to.equal(4);
     });
 
-    it('should not call onDelete function when ChipDelete is disabled', () => {
+    it('should not call onDelete function when ChipDelete is disabled', async () => {
       const handleDelete = spy();
       const { getByRole } = render(
         <ChipDelete disabled onDelete={handleDelete} onClick={() => {}} />,
       );
       const chipDelete = getByRole('button');
-      act(() => {
+      await act(async () => {
         chipDelete.focus();
       });
       fireEvent.click(chipDelete);
diff --git a/packages/mui-joy/src/Input/Input.test.tsx b/packages/mui-joy/src/Input/Input.test.tsx
index ace9fa75ffe8f3..044e87ccb21b83 100644
--- a/packages/mui-joy/src/Input/Input.test.tsx
+++ b/packages/mui-joy/src/Input/Input.test.tsx
@@ -67,12 +67,12 @@ describe('Joy <Input />', () => {
       expect(container.firstChild).to.have.class(classes.disabled);
     });
 
-    it('should reset the focused state if getting disabled', () => {
+    it('should reset the focused state if getting disabled', async () => {
       const handleBlur = spy();
       const handleFocus = spy();
       const { getByRole, setProps } = render(<Input onBlur={handleBlur} onFocus={handleFocus} />);
 
-      act(() => {
+      await act(async () => {
         getByRole('textbox').focus();
       });
       expect(handleFocus.callCount).to.equal(1);
@@ -107,14 +107,14 @@ describe('Joy <Input />', () => {
   });
 
   describe('slotProps: input', () => {
-    it('`onKeyDown` and `onKeyUp` should work', () => {
+    it('`onKeyDown` and `onKeyUp` should work', async () => {
       const handleKeyDown = spy();
       const handleKeyUp = spy();
       const { getByRole } = render(
         <Input slotProps={{ input: { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp } }} />,
       );
 
-      act(() => {
+      await act(async () => {
         getByRole('textbox').focus();
       });
       fireEvent.keyDown(getByRole('textbox'));
@@ -124,31 +124,31 @@ describe('Joy <Input />', () => {
       expect(handleKeyUp.callCount).to.equal(1);
     });
 
-    it('should call focus and blur', () => {
+    it('should call focus and blur', async () => {
       const handleBlur = spy();
       const handleFocus = spy();
       const { getByRole } = render(
         <Input slotProps={{ input: { onFocus: handleFocus, onBlur: handleBlur } }} />,
       );
 
-      act(() => {
+      await act(async () => {
         getByRole('textbox').focus();
       });
       expect(handleFocus.callCount).to.equal(1);
-      act(() => {
+      await act(async () => {
         getByRole('textbox').blur();
       });
       expect(handleFocus.callCount).to.equal(1);
     });
 
-    it('should override outer handlers', () => {
+    it('should override outer handlers', async () => {
       const handleFocus = spy();
       const handleSlotFocus = spy();
       const { getByRole } = render(
         <Input onFocus={handleFocus} slotProps={{ input: { onFocus: handleSlotFocus } }} />,
       );
 
-      act(() => {
+      await act(async () => {
         getByRole('textbox').focus();
       });
       expect(handleFocus.callCount).to.equal(0);
diff --git a/packages/mui-joy/src/Link/Link.test.tsx b/packages/mui-joy/src/Link/Link.test.tsx
index 0da69c7a560910..58ce4e3651f2bc 100644
--- a/packages/mui-joy/src/Link/Link.test.tsx
+++ b/packages/mui-joy/src/Link/Link.test.tsx
@@ -8,8 +8,8 @@ import Typography from '@mui/joy/Typography';
 import { ThemeProvider, TypographySystem } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
 
-function focusVisible(element: HTMLAnchorElement | null) {
-  act(() => {
+async function focusVisible(element: HTMLAnchorElement | null) {
+  await act(async () => {
     element?.blur();
     document.dispatchEvent(new window.Event('keydown'));
     element?.focus();
@@ -75,7 +75,7 @@ describe('<Link />', () => {
   });
 
   describe('keyboard focus', () => {
-    it('should add the focusVisible class when focused', function test() {
+    it('should add the focusVisible class when focused', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // JSDOM doesn't support :focus-visible
         this.skip();
@@ -86,11 +86,11 @@ describe('<Link />', () => {
 
       expect(anchor).not.to.have.class(classes.focusVisible);
 
-      focusVisible(anchor);
+      await focusVisible(anchor);
 
       expect(anchor).to.have.class(classes.focusVisible);
 
-      act(() => {
+      await act(async () => {
         anchor?.blur();
       });
 
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
index 08f3eb26a2c20d..213dd9f4d1254b 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
@@ -56,7 +56,7 @@ describe('Joy <ListItemButton />', () => {
   });
 
   describe('prop: focusVisibleClassName', () => {
-    it('should have focusVisible classes', function test() {
+    it('should have focusVisible classes', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // JSDOM doesn't support :focus-visible
         this.skip();
@@ -65,7 +65,7 @@ describe('Joy <ListItemButton />', () => {
       const { getByRole } = render(<ListItemButton />);
       const button = getByRole('button');
 
-      act(() => {
+      await act(async () => {
         fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
         button.focus();
       });
diff --git a/packages/mui-joy/src/Menu/Menu.test.tsx b/packages/mui-joy/src/Menu/Menu.test.tsx
index 8a8e9f38ab4222..261036e2e5e4c0 100644
--- a/packages/mui-joy/src/Menu/Menu.test.tsx
+++ b/packages/mui-joy/src/Menu/Menu.test.tsx
@@ -21,7 +21,7 @@ const testContext: DropdownContextValue = {
 };
 
 describe('Joy <Menu />', () => {
-  const { render } = createRenderer({ clock: 'fake' });
+  const { render } = createRenderer();
 
   describeConformance(<Menu />, () => ({
     classes,
@@ -54,7 +54,7 @@ describe('Joy <Menu />', () => {
     expect(screen.getByTestId('popover')).to.have.tagName('ul');
   });
 
-  it('should pass onClose prop to Popover', () => {
+  it('should pass onClose prop to Popover', async () => {
     const handleClose = spy();
     render(
       <Dropdown open onOpenChange={handleClose}>
@@ -67,7 +67,7 @@ describe('Joy <Menu />', () => {
 
     const item = screen.getByRole('menuitem');
 
-    act(() => {
+    await act(async () => {
       item.focus();
     });
 
diff --git a/packages/mui-joy/src/Modal/Modal.test.tsx b/packages/mui-joy/src/Modal/Modal.test.tsx
index 422cdde727952c..31eadbf4f4332e 100644
--- a/packages/mui-joy/src/Modal/Modal.test.tsx
+++ b/packages/mui-joy/src/Modal/Modal.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { spy } from 'sinon';
+import { SinonFakeTimers, spy, useFakeTimers } from 'sinon';
 import { expect } from 'chai';
 import { createRenderer, act, fireEvent, within } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
@@ -8,7 +8,7 @@ import Modal, { modalClasses as classes, ModalProps } from '@mui/joy/Modal';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Modal />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   describeConformance(
     <Modal open>
@@ -178,14 +178,14 @@ describe('<Modal />', () => {
   });
 
   describe('event: keydown', () => {
-    it('when mounted, TopModal and event not esc should not call given functions', () => {
+    it('when mounted, TopModal and event not esc should not call given functions', async () => {
       const onCloseSpy = spy();
       const { getByTestId } = render(
         <Modal open onClose={onCloseSpy}>
           <div data-testid="modal" tabIndex={-1} />
         </Modal>,
       );
-      act(() => {
+      await act(async () => {
         getByTestId('modal').focus();
       });
 
@@ -196,7 +196,7 @@ describe('<Modal />', () => {
       expect(onCloseSpy).to.have.property('callCount', 0);
     });
 
-    it('should call onClose when Esc is pressed and stop event propagation', () => {
+    it('should call onClose when Esc is pressed and stop event propagation', async () => {
       const handleKeyDown = spy();
       const onCloseSpy = spy();
       const { getByTestId } = render(
@@ -206,7 +206,7 @@ describe('<Modal />', () => {
           </Modal>
         </div>,
       );
-      act(() => {
+      await act(async () => {
         getByTestId('modal').focus();
       });
 
@@ -218,7 +218,7 @@ describe('<Modal />', () => {
       expect(handleKeyDown).to.have.property('callCount', 0);
     });
 
-    it('should not call onClose when `disableEscapeKeyDown={true}`', () => {
+    it('should not call onClose when `disableEscapeKeyDown={true}`', async () => {
       const handleKeyDown = spy();
       const onCloseSpy = spy();
       const { getByTestId } = render(
@@ -228,7 +228,7 @@ describe('<Modal />', () => {
           </Modal>
         </div>,
       );
-      act(() => {
+      await act(async () => {
         getByTestId('modal').focus();
       });
 
@@ -285,11 +285,11 @@ describe('<Modal />', () => {
   describe('focus', () => {
     let initialFocus: null | HTMLButtonElement = null;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       initialFocus = document.createElement('button');
       initialFocus.tabIndex = 0;
       document.body.appendChild(initialFocus);
-      act(() => {
+      await act(async () => {
         initialFocus?.focus();
       });
     });
@@ -320,7 +320,7 @@ describe('<Modal />', () => {
           </div>
         </Modal>,
         // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076
-        { strictEffects: false },
+        { strict: false, strictEffects: false },
       );
 
       expect(getByTestId('auto-focus')).toHaveFocus();
@@ -355,9 +355,29 @@ describe('<Modal />', () => {
     });
 
     describe('focus stealing', () => {
-      clock.withFakeTimers();
+      let timer: SinonFakeTimers | null = null;
+
+      beforeEach(() => {
+        timer = useFakeTimers({
+          shouldClearNativeTimers: true,
+          toFake: [
+            'performance',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'Date',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+          ],
+        });
+      });
+
+      afterEach(() => {
+        timer?.restore();
+      });
 
-      it('does not steal focus from other frames', function test() {
+      it('does not steal focus from other frames', async function test() {
         if (/jsdom/.test(window.navigator.userAgent)) {
           // TODO: Unclear why this fails. Not important
           // since a browser test gives us more confidence anyway
@@ -412,18 +432,40 @@ describe('<Modal />', () => {
           </React.Fragment>,
         );
 
-        act(() => {
+        await act(async () => {
           getByTestId('foreign-input').focus();
         });
         // wait for the `contain` interval check to kick in.
-        clock.tick(500);
+        await act(async () => {
+          timer?.tickAsync(500);
+        });
 
         expect(getByTestId('foreign-input')).toHaveFocus();
       });
     });
 
     describe('when starting open and closing immediately', () => {
-      clock.withFakeTimers();
+      let timer: SinonFakeTimers | null = null;
+
+      beforeEach(() => {
+        timer = useFakeTimers({
+          shouldClearNativeTimers: true,
+          toFake: [
+            'performance',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'Date',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+          ],
+        });
+      });
+
+      afterEach(() => {
+        timer?.restore();
+      });
 
       // Test case for https://github.com/mui/material-ui/issues/12831
       it('should unmount the children ', () => {
@@ -447,7 +489,27 @@ describe('<Modal />', () => {
   });
 
   describe('two modal at the same time', () => {
-    clock.withFakeTimers();
+    let timer: SinonFakeTimers | null = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
     it('should open and close', () => {
       function TestCase(props: { open: boolean }) {
diff --git a/packages/mui-joy/src/Radio/Radio.test.tsx b/packages/mui-joy/src/Radio/Radio.test.tsx
index fdb63ce9459b5c..7192555bbe6cfb 100644
--- a/packages/mui-joy/src/Radio/Radio.test.tsx
+++ b/packages/mui-joy/src/Radio/Radio.test.tsx
@@ -98,11 +98,11 @@ describe('<Radio />', () => {
     expect(getByRole('radio')).to.have.property('disabled', true);
   });
 
-  it('the Checked state changes after change events', () => {
+  it('the Checked state changes after change events', async () => {
     const { getByRole } = render(<Radio defaultChecked />);
 
     // how a user would trigger it
-    act(() => {
+    await act(async () => {
       getByRole('radio').click();
       fireEvent.change(getByRole('radio'), { target: { checked: '' } });
     });
@@ -148,7 +148,7 @@ describe('<Radio />', () => {
     expect(getByRole('radio', { checked: true })).to.have.property('value', '1');
   });
 
-  it('should be checked when changing the value', () => {
+  it('should be checked when changing the value', async () => {
     const { getByRole } = render(
       <RadioGroup defaultValue={1}>
         <Radio name="0" value={0} />
@@ -158,13 +158,13 @@ describe('<Radio />', () => {
 
     expect(getByRole('radio', { checked: true })).to.have.property('value', '1');
 
-    act(() => {
+    await act(async () => {
       getByRole('radio', { checked: false }).click();
     });
 
     expect(getByRole('radio', { checked: true })).to.have.property('value', '0');
 
-    act(() => {
+    await act(async () => {
       getByRole('radio', { checked: false }).click();
     });
 
diff --git a/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx b/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
index 8665f6bd97ad82..90b851a22ebfb4 100644
--- a/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
+++ b/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
@@ -48,12 +48,12 @@ describe('<RadioGroup />', () => {
     expect(handleBlur.callCount).to.equal(1);
   });
 
-  it('should fire the onKeyDown callback', () => {
+  it('should fire the onKeyDown callback', async () => {
     const handleKeyDown = spy();
     const { getByRole } = render(<RadioGroup tabIndex={-1} value="" onKeyDown={handleKeyDown} />);
     const radiogroup = getByRole('radiogroup');
 
-    act(() => {
+    await act(async () => {
       radiogroup.focus();
     });
 
diff --git a/packages/mui-joy/src/Select/Select.test.tsx b/packages/mui-joy/src/Select/Select.test.tsx
index bfe89587c6bdbf..3f7a1c6e25a60a 100644
--- a/packages/mui-joy/src/Select/Select.test.tsx
+++ b/packages/mui-joy/src/Select/Select.test.tsx
@@ -11,7 +11,7 @@ import ListDivider from '@mui/joy/ListDivider';
 import describeConformance from '../../test/describeConformance';
 
 describe('Joy <Select />', () => {
-  const { render } = createRenderer({ clock: 'fake' });
+  const { render } = createRenderer();
 
   describeConformance(<Select startDecorator="1" endDecorator="1" />, () => ({
     render,
@@ -86,7 +86,7 @@ describe('Joy <Select />', () => {
     );
   });
 
-  it('should pass "name" as part of the event.target for onBlur', () => {
+  it('should pass "name" as part of the event.target for onBlur', async () => {
     const handleBlur = stub().callsFake((event) => event.target.name);
     const { getByRole } = render(
       <Select
@@ -102,11 +102,11 @@ describe('Joy <Select />', () => {
       </Select>,
     );
     const select = getByRole('combobox');
-    act(() => {
+    await act(async () => {
       select.focus();
     });
 
-    act(() => {
+    await act(async () => {
       select.blur();
     });
 
@@ -114,7 +114,7 @@ describe('Joy <Select />', () => {
     expect(handleBlur.firstCall.returnValue).to.equal('blur-testing');
   });
 
-  it('should call onClose when the same option is selected', () => {
+  it('should call onClose when the same option is selected', async () => {
     const handleChange = spy();
     const handleClose = spy();
     render(
@@ -124,7 +124,7 @@ describe('Joy <Select />', () => {
       </Select>,
     );
 
-    act(() => {
+    await act(async () => {
       screen.getByRole('option', { selected: true }).click();
     });
 
@@ -141,7 +141,7 @@ describe('Joy <Select />', () => {
   });
 
   describe('prop: onChange', () => {
-    it('should get selected value from the 2nd argument', () => {
+    it('should get selected value from the 2nd argument', async () => {
       const onChangeHandler = spy();
       const { getAllByRole, getByRole } = render(
         <Select onChange={onChangeHandler} value="0">
@@ -151,7 +151,7 @@ describe('Joy <Select />', () => {
         </Select>,
       );
       fireEvent.click(getByRole('combobox'));
-      act(() => {
+      await act(async () => {
         getAllByRole('option')[1].click();
       });
 
@@ -159,7 +159,7 @@ describe('Joy <Select />', () => {
       expect(onChangeHandler.args[0][1]).to.equal('1');
     });
 
-    it('should not be called if selected element has the current value (value did not change)', () => {
+    it('should not be called if selected element has the current value (value did not change)', async () => {
       const onChangeHandler = spy();
       const { getAllByRole, getByRole } = render(
         <Select onChange={onChangeHandler} value="1">
@@ -169,7 +169,7 @@ describe('Joy <Select />', () => {
         </Select>,
       );
       fireEvent.click(getByRole('combobox'));
-      act(() => {
+      await act(async () => {
         getAllByRole('option')[1].click();
       });
 
@@ -443,7 +443,7 @@ describe('Joy <Select />', () => {
     expect(onClick.callCount).to.equal(1);
   });
 
-  it('should not override the event.target on mouse events', () => {
+  it('should not override the event.target on mouse events', async () => {
     const handleChange = spy();
     const handleClick = spy();
     render(
@@ -456,7 +456,7 @@ describe('Joy <Select />', () => {
     );
 
     const options = screen.getAllByRole('option');
-    act(() => {
+    await act(async () => {
       options[0].click();
     });
 
@@ -465,7 +465,7 @@ describe('Joy <Select />', () => {
     expect(handleClick.firstCall.args[0]).to.have.property('target', options[0]);
   });
 
-  it('should only select options', () => {
+  it('should only select options', async () => {
     const handleChange = spy();
     render(
       <Select defaultListboxOpen onChange={handleChange} value="second">
@@ -476,7 +476,7 @@ describe('Joy <Select />', () => {
     );
 
     const divider = screen.getByRole('separator');
-    act(() => {
+    await act(async () => {
       divider.click();
     });
     expect(handleChange.callCount).to.equal(0);
@@ -496,7 +496,7 @@ describe('Joy <Select />', () => {
   });
 
   describe('form submission', () => {
-    it('includes the Select value in the submitted form data when the `name` attribute is provided', function test() {
+    it('includes the Select value in the submitted form data when the `name` attribute is provided', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // FormData is not available in JSDOM
         this.skip();
@@ -522,14 +522,14 @@ describe('Joy <Select />', () => {
       );
 
       const button = getByText('Submit');
-      act(() => {
+      await act(async () => {
         button.click();
       });
 
       expect(isEventHandled).to.equal(true);
     });
 
-    it('transforms the selected value before posting using the getSerializedValue prop, if provided', function test() {
+    it('transforms the selected value before posting using the getSerializedValue prop, if provided', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // FormData is not available in JSDOM
         this.skip();
@@ -558,14 +558,14 @@ describe('Joy <Select />', () => {
       );
 
       const button = getByText('Submit');
-      act(() => {
+      await act(async () => {
         button.click();
       });
 
       expect(isEventHandled).to.equal(true);
     });
 
-    it('formats the object values as JSON before posting', function test() {
+    it('formats the object values as JSON before posting', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // FormData is not available in JSDOM
         this.skip();
@@ -599,7 +599,7 @@ describe('Joy <Select />', () => {
       );
 
       const button = getByText('Submit');
-      act(() => {
+      await act(async () => {
         button.click();
       });
 
@@ -607,7 +607,7 @@ describe('Joy <Select />', () => {
     });
   });
 
-  it('should show dropdown if the children of the select button is clicked', () => {
+  it('should show dropdown if the children of the select button is clicked', async () => {
     const { getByTestId, getByRole } = render(
       <Select
         defaultValue="1"
@@ -617,14 +617,14 @@ describe('Joy <Select />', () => {
       </Select>,
     );
     // Fire Click of the avatar
-    act(() => {
+    await act(async () => {
       fireEvent.click(getByTestId('test-element'));
     });
 
     expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-expanded', 'true');
 
     // click again should close
-    act(() => {
+    await act(async () => {
       fireEvent.click(getByTestId('test-element'));
     });
     expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-expanded', 'false');
diff --git a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
index af55c7aa4e5d98..112e42a0473bde 100644
--- a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
+++ b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
@@ -1,13 +1,35 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { SinonFakeTimers, spy, useFakeTimers } from 'sinon';
 import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
 import Snackbar, { snackbarClasses as classes } from '@mui/joy/Snackbar';
 import { ThemeProvider } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
 
 describe('Joy <Snackbar />', () => {
-  const { render: clientRender, clock } = createRenderer({ clock: 'fake' });
+  let timer: SinonFakeTimers | null = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render: clientRender } = createRenderer();
 
   /**
    * @type  {typeof plainRender extends (...args: infer T) => any ? T : never} args
@@ -19,9 +41,11 @@ describe('Joy <Snackbar />', () => {
    * We have to defer the effect manually like `useEffect` would so we have to flush the effect manually instead of relying on `act()`.
    * React bug: https://github.com/facebook/react/issues/20074
    */
-  function render(...args: [React.ReactElement<any>]) {
+  async function render(...args: [React.ReactElement<any>]) {
     const result = clientRender(...args);
-    clock.tick(0);
+    await act(async () => {
+      await timer?.tickAsync(0);
+    });
     return result;
   }
 
@@ -30,7 +54,7 @@ describe('Joy <Snackbar />', () => {
       Hello World!
     </Snackbar>,
     () => ({
-      render,
+      render: clientRender,
       classes,
       ThemeProvider,
       muiName: 'JoySnackbar',
@@ -46,24 +70,26 @@ describe('Joy <Snackbar />', () => {
   );
 
   describe('prop: onClose', () => {
-    it('should be called when clicking away', () => {
+    it('should be called when clicking away', async () => {
       const handleClose = spy();
-      render(
+      await render(
         <Snackbar open onClose={handleClose}>
           Message
         </Snackbar>,
       );
 
       const event = new window.Event('click', { bubbles: true, cancelable: true });
-      document.body.dispatchEvent(event);
+      await act(async () => {
+        document.body.dispatchEvent(event);
+      });
 
       expect(handleClose.callCount).to.equal(1);
       expect(handleClose.args[0]).to.deep.equal([event, 'clickaway']);
     });
 
-    it('should be called when pressing Escape', () => {
+    it('should be called when pressing Escape', async () => {
       const handleClose = spy();
-      render(
+      await render(
         <Snackbar open onClose={handleClose}>
           Message
         </Snackbar>,
@@ -74,10 +100,10 @@ describe('Joy <Snackbar />', () => {
       expect(handleClose.args[0][1]).to.equal('escapeKeyDown');
     });
 
-    it('can limit which Snackbars are closed when pressing Escape', () => {
+    it('can limit which Snackbars are closed when pressing Escape', async () => {
       const handleCloseA = spy((event) => event.preventDefault());
       const handleCloseB = spy();
-      render(
+      await render(
         <React.Fragment>
           <Snackbar open onClose={handleCloseA}>
             Message A
@@ -96,10 +122,10 @@ describe('Joy <Snackbar />', () => {
   });
 
   describe('prop: autoHideDuration', () => {
-    it('should call onClose when the timer is done', () => {
+    it('should call onClose when the timer is done', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      const { setProps } = render(
+      const { setProps } = await render(
         <Snackbar open={false} onClose={handleClose} autoHideDuration={autoHideDuration}>
           Message
         </Snackbar>,
@@ -109,35 +135,41 @@ describe('Joy <Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(1);
       expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
     });
 
-    it('calls onClose at timeout even if the prop changes', () => {
+    it('calls onClose at timeout even if the prop changes', async () => {
       const handleClose1 = spy();
       const handleClose2 = spy();
       const autoHideDuration = 2e3;
-      const { setProps } = render(
+      const { setProps } = await render(
         <Snackbar open={false} onClose={handleClose1} autoHideDuration={autoHideDuration}>
           Message
         </Snackbar>,
       );
 
       setProps({ open: true });
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
       setProps({ open: true, onClose: handleClose2 });
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
 
       expect(handleClose1.callCount).to.equal(0);
       expect(handleClose2.callCount).to.equal(1);
     });
 
-    it('should not call onClose when the autoHideDuration is reset', () => {
+    it('should not call onClose when the autoHideDuration is reset', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      const { setProps } = render(
+      const { setProps } = await render(
         <Snackbar open={false} onClose={handleClose} autoHideDuration={autoHideDuration}>
           Message
         </Snackbar>,
@@ -147,17 +179,21 @@ describe('Joy <Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
       setProps({ autoHideDuration: undefined });
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
 
       expect(handleClose.callCount).to.equal(0);
     });
 
-    it('should not call onClose if autoHideDuration is undefined', () => {
+    it('should not call onClose if autoHideDuration is undefined', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      render(
+      await render(
         <Snackbar open onClose={handleClose} autoHideDuration={undefined}>
           Message
         </Snackbar>,
@@ -165,16 +201,18 @@ describe('Joy <Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(0);
     });
 
-    it('should not call onClose if autoHideDuration is null', () => {
+    it('should not call onClose if autoHideDuration is null', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
 
-      render(
+      await render(
         <Snackbar open onClose={handleClose} autoHideDuration={null}>
           Message
         </Snackbar>,
@@ -182,16 +220,18 @@ describe('Joy <Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(0);
     });
 
-    it('should not call onClose when closed', () => {
+    it('should not call onClose when closed', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
 
-      const { setProps } = render(
+      const { setProps } = await render(
         <Snackbar open onClose={handleClose} autoHideDuration={autoHideDuration}>
           Message
         </Snackbar>,
@@ -199,9 +239,13 @@ describe('Joy <Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
       setProps({ open: false });
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
 
       expect(handleClose.callCount).to.equal(0);
     });
@@ -215,12 +259,16 @@ describe('Joy <Snackbar />', () => {
     },
     {
       type: 'keyboard',
-      enter: (container: HTMLElement) => act(() => container.querySelector('button')!.focus()),
-      leave: (container: HTMLElement) => act(() => container.querySelector('button')!.blur()),
+      enter: async (container: HTMLElement) => {
+        await act(async () => container.querySelector('button')!.focus());
+      },
+      leave: async (container: HTMLElement) => {
+        await act(async () => container.querySelector('button')!.blur());
+      },
     },
   ].forEach((userInteraction) => {
     describe(`interacting with ${userInteraction.type}`, () => {
-      it('should be able to interrupt the timer', () => {
+      it('should be able to interrupt the timer', async () => {
         const handleMouseEnter = spy();
         const handleMouseLeave = spy();
         const handleBlur = spy();
@@ -228,7 +276,7 @@ describe('Joy <Snackbar />', () => {
         const handleClose = spy();
         const autoHideDuration = 2e3;
 
-        const { container } = render(
+        const { container } = await render(
           <Snackbar
             endDecorator={<button>undo</button>}
             open
@@ -245,8 +293,10 @@ describe('Joy <Snackbar />', () => {
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(autoHideDuration / 2);
-        userInteraction.enter(container.querySelector('div')!);
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await await userInteraction.enter(container.querySelector('div')!);
 
         if (userInteraction.type === 'keyboard') {
           expect(handleFocus.callCount).to.equal(1);
@@ -254,8 +304,10 @@ describe('Joy <Snackbar />', () => {
           expect(handleMouseEnter.callCount).to.equal(1);
         }
 
-        clock.tick(autoHideDuration / 2);
-        userInteraction.leave(container.querySelector('div')!);
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await await userInteraction.leave(container.querySelector('div')!);
 
         if (userInteraction.type === 'keyboard') {
           expect(handleBlur.callCount).to.equal(1);
@@ -264,18 +316,20 @@ describe('Joy <Snackbar />', () => {
         }
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(2e3);
+        await act(async () => {
+          await timer?.tickAsync(2e3);
+        });
 
         expect(handleClose.callCount).to.equal(1);
         expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
       });
 
-      it('should not call onClose with not timeout after user interaction', () => {
+      it('should not call onClose with not timeout after user interaction', async () => {
         const handleClose = spy();
         const autoHideDuration = 2e3;
         const resumeHideDuration = 3e3;
 
-        const { container } = render(
+        const { container } = await render(
           <Snackbar
             endDecorator={<button>undo</button>}
             open
@@ -289,24 +343,30 @@ describe('Joy <Snackbar />', () => {
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(autoHideDuration / 2);
-        userInteraction.enter(container.querySelector('div')!);
-        clock.tick(autoHideDuration / 2);
-        userInteraction.leave(container.querySelector('div')!);
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.enter(container.querySelector('div')!);
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.leave(container.querySelector('div')!);
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(2e3);
+        await act(async () => {
+          await timer?.tickAsync(2e3);
+        });
 
         expect(handleClose.callCount).to.equal(0);
       });
 
-      it('should call onClose when timer done after user interaction', () => {
+      it('should call onClose when timer done after user interaction', async () => {
         const handleClose = spy();
         const autoHideDuration = 2e3;
         const resumeHideDuration = 3e3;
 
-        const { container } = render(
+        const { container } = await render(
           <Snackbar
             endDecorator={<button>undo</button>}
             open
@@ -320,24 +380,30 @@ describe('Joy <Snackbar />', () => {
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(autoHideDuration / 2);
-        userInteraction.enter(container.querySelector('div')!);
-        clock.tick(autoHideDuration / 2);
-        userInteraction.leave(container.querySelector('div')!);
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.enter(container.querySelector('div')!);
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.leave(container.querySelector('div')!);
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(resumeHideDuration);
+        await act(async () => {
+          await timer?.tickAsync(resumeHideDuration);
+        });
 
         expect(handleClose.callCount).to.equal(1);
         expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
       });
 
-      it('should call onClose immediately after user interaction when 0', () => {
+      it('should call onClose immediately after user interaction when 0', async () => {
         const handleClose = spy();
         const autoHideDuration = 6e3;
         const resumeHideDuration = 0;
-        const { setProps, container } = render(
+        const { setProps, container } = await render(
           <Snackbar
             endDecorator={<button>undo</button>}
             open
@@ -353,10 +419,14 @@ describe('Joy <Snackbar />', () => {
 
         expect(handleClose.callCount).to.equal(0);
 
-        userInteraction.enter(container.querySelector('div')!);
-        clock.tick(100);
-        userInteraction.leave(container.querySelector('div')!);
-        clock.tick(resumeHideDuration);
+        await userInteraction.enter(container.querySelector('div')!);
+        await act(async () => {
+          await timer?.tickAsync(100);
+        });
+        await userInteraction.leave(container.querySelector('div')!);
+        await act(async () => {
+          await timer?.tickAsync(resumeHideDuration);
+        });
 
         expect(handleClose.callCount).to.equal(1);
         expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
@@ -365,10 +435,10 @@ describe('Joy <Snackbar />', () => {
   });
 
   describe('prop: disableWindowBlurListener', () => {
-    it('should pause auto hide when not disabled and window lost focus', () => {
+    it('should pause auto hide when not disabled and window lost focus', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      render(
+      await render(
         <Snackbar
           open
           onClose={handleClose}
@@ -379,7 +449,7 @@ describe('Joy <Snackbar />', () => {
         </Snackbar>,
       );
 
-      act(() => {
+      await act(async () => {
         const bEvent = new window.Event('blur', {
           bubbles: false,
           cancelable: false,
@@ -389,11 +459,13 @@ describe('Joy <Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(0);
 
-      act(() => {
+      await act(async () => {
         const fEvent = new window.Event('focus', {
           bubbles: false,
           cancelable: false,
@@ -403,16 +475,18 @@ describe('Joy <Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(1);
       expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
     });
 
-    it('should not pause auto hide when disabled and window lost focus', () => {
+    it('should not pause auto hide when disabled and window lost focus', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      render(
+      await render(
         <Snackbar
           open
           onClose={handleClose}
@@ -423,14 +497,16 @@ describe('Joy <Snackbar />', () => {
         </Snackbar>,
       );
 
-      act(() => {
+      await act(async () => {
         const event = new window.Event('blur', { bubbles: false, cancelable: false });
         window.dispatchEvent(event);
       });
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(1);
       expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
@@ -438,13 +514,13 @@ describe('Joy <Snackbar />', () => {
   });
 
   describe('prop: open', () => {
-    it('should not render anything when closed', () => {
-      const { container } = render(<Snackbar open={false}>Hello World!</Snackbar>);
+    it('should not render anything when closed', async () => {
+      const { container } = await render(<Snackbar open={false}>Hello World!</Snackbar>);
       expect(container).to.have.text('');
     });
 
-    it('should be able show it after mounted', () => {
-      const { container, setProps } = render(<Snackbar open={false}>Hello World!</Snackbar>);
+    it('should be able show it after mounted', async () => {
+      const { container, setProps } = await render(<Snackbar open={false}>Hello World!</Snackbar>);
       expect(container).to.have.text('');
       setProps({ open: true });
       expect(container).to.have.text('Hello World!');
diff --git a/packages/mui-joy/src/Switch/Switch.test.tsx b/packages/mui-joy/src/Switch/Switch.test.tsx
index d14a52403e2db0..357a4a6dc7187a 100644
--- a/packages/mui-joy/src/Switch/Switch.test.tsx
+++ b/packages/mui-joy/src/Switch/Switch.test.tsx
@@ -19,6 +19,7 @@ describe('<Switch />', () => {
       { slotName: 'input', slotClassName: classes.input },
       { slotName: 'thumb', slotClassName: classes.thumb },
     ],
+
     testVariantProps: { variant: 'soft' },
     testCustomVariant: true,
     refInstanceof: window.HTMLDivElement,
@@ -91,11 +92,11 @@ describe('<Switch />', () => {
     expect(getByRole('switch')).to.have.property('readOnly', true);
   });
 
-  it('the Checked state changes after change events', () => {
+  it('the Checked state changes after change events', async () => {
     const { getByRole } = render(<Switch defaultChecked />);
 
     // how a user would trigger it
-    act(() => {
+    await act(async () => {
       getByRole('switch').click();
       fireEvent.change(getByRole('switch'), { target: { checked: '' } });
     });
@@ -116,7 +117,7 @@ describe('<Switch />', () => {
       expect(getByText('bar')).toBeVisible();
     });
 
-    it('can receive startDecorator as function', () => {
+    it('can receive startDecorator as function', async () => {
       const { getByText, getByRole } = render(
         <Switch startDecorator={({ checked }) => (checked ? 'On' : 'Off')} />,
       );
@@ -124,7 +125,7 @@ describe('<Switch />', () => {
       expect(getByText('Off')).toBeVisible();
 
       // how a user would trigger it
-      act(() => {
+      await act(async () => {
         getByRole('switch').click();
         fireEvent.change(getByRole('switch'), { target: { checked: '' } });
       });
@@ -132,7 +133,7 @@ describe('<Switch />', () => {
       expect(getByText('On')).toBeVisible();
     });
 
-    it('can receive endDecorator as function', () => {
+    it('can receive endDecorator as function', async () => {
       const { getByText, getByRole } = render(
         <Switch endDecorator={({ checked }) => (checked ? 'On' : 'Off')} />,
       );
@@ -140,7 +141,7 @@ describe('<Switch />', () => {
       expect(getByText('Off')).toBeVisible();
 
       // how a user would trigger it
-      act(() => {
+      await act(async () => {
         getByRole('switch').click();
         fireEvent.change(getByRole('switch'), { target: { checked: '' } });
       });
diff --git a/packages/mui-joy/src/Textarea/Textarea.test.tsx b/packages/mui-joy/src/Textarea/Textarea.test.tsx
index 25f272d8b7939e..cae79a54ae9ad1 100644
--- a/packages/mui-joy/src/Textarea/Textarea.test.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.test.tsx
@@ -68,14 +68,14 @@ describe('Joy <Textarea />', () => {
       expect(container.firstChild).to.have.class(classes.disabled);
     });
 
-    it('should reset the focused state if getting disabled', () => {
+    it('should reset the focused state if getting disabled', async () => {
       const handleBlur = spy();
       const handleFocus = spy();
       const { container, setProps } = render(
         <Textarea onBlur={handleBlur} onFocus={handleFocus} />,
       );
 
-      act(() => {
+      await act(async () => {
         container.querySelector('textarea')?.focus();
       });
       expect(handleFocus.callCount).to.equal(1);
@@ -88,14 +88,14 @@ describe('Joy <Textarea />', () => {
   });
 
   describe('slotProps: input', () => {
-    it('`onKeyDown` and `onKeyUp` should work', () => {
+    it('`onKeyDown` and `onKeyUp` should work', async () => {
       const handleKeyDown = spy();
       const handleKeyUp = spy();
       const { container } = render(
         <Textarea slotProps={{ textarea: { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp } }} />,
       );
 
-      act(() => {
+      await act(async () => {
         container.querySelector('textarea')!.focus();
       });
       fireEvent.keyDown(container.querySelector('textarea')!);
@@ -105,31 +105,31 @@ describe('Joy <Textarea />', () => {
       expect(handleKeyUp.callCount).to.equal(1);
     });
 
-    it('should call focus and blur', () => {
+    it('should call focus and blur', async () => {
       const handleBlur = spy();
       const handleFocus = spy();
       const { container } = render(
         <Textarea slotProps={{ textarea: { onFocus: handleFocus, onBlur: handleBlur } }} />,
       );
 
-      act(() => {
+      await act(async () => {
         container.querySelector('textarea')!.focus();
       });
       expect(handleFocus.callCount).to.equal(1);
-      act(() => {
+      await act(async () => {
         container.querySelector('textarea')!.blur();
       });
       expect(handleFocus.callCount).to.equal(1);
     });
 
-    it('should override outer handlers', () => {
+    it('should override outer handlers', async () => {
       const handleFocus = spy();
       const handleSlotFocus = spy();
       const { container } = render(
         <Textarea onFocus={handleFocus} slotProps={{ textarea: { onFocus: handleSlotFocus } }} />,
       );
 
-      act(() => {
+      await act(async () => {
         container.querySelector('textarea')!.focus();
       });
       expect(handleFocus.callCount).to.equal(0);
diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
index b2b1a3068cbe5d..be83963fc145ec 100644
--- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
+++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
@@ -46,7 +46,7 @@ describe('<ToggleButtonGroup />', () => {
     expect(secondButton).to.have.property('disabled', true);
   });
 
-  it('should toggle the state when immediate children is not button', () => {
+  it('should toggle the state when immediate children is not button', async () => {
     function CustomButton() {
       return <Button value="custom-button">Custom button</Button>;
     }
@@ -80,17 +80,17 @@ describe('<ToggleButtonGroup />', () => {
     const { getAllByRole } = render(<ToggleGroup />);
 
     const [firstButton, secondButton, thirdButton, fourthButton] = getAllByRole('button');
-    act(() => {
+    await act(async () => {
       firstButton.click();
     });
     expect(handleChange.args[0][1]).to.have.members(['tooltip-button']);
     expect(firstButton).to.have.attribute('aria-pressed', 'true');
-    act(() => {
+    await act(async () => {
       secondButton.click();
     });
     expect(handleChange.args[1][1]).to.have.members(['tooltip-button', 'custom-button']);
     expect(secondButton).to.have.attribute('aria-pressed', 'true');
-    act(() => {
+    await act(async () => {
       thirdButton.click();
     });
     expect(handleChange.args[2][1]).to.have.members([
@@ -99,7 +99,7 @@ describe('<ToggleButtonGroup />', () => {
       'custom-iconbutton',
     ]);
     expect(thirdButton).to.have.attribute('aria-pressed', 'true');
-    act(() => {
+    await act(async () => {
       fourthButton.click();
     });
     expect(handleChange.args[3][1]).to.have.members([
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
index 6f2f6476fc30a4..3fe67ed328d2e7 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
@@ -138,7 +138,7 @@ describe('<Tooltip />', () => {
 
   describe('focus', () => {
     // https://github.com/mui/mui-x/issues/12248
-    it('should support event handlers with extra parameters', () => {
+    it('should support event handlers with extra parameters', async () => {
       const handleFocus = spy((event, extra) => extra);
       const handleBlur = spy((event, ...params) => params);
 
@@ -167,14 +167,14 @@ describe('<Tooltip />', () => {
       );
       const input = getByRole('textbox');
 
-      act(() => {
+      await act(async () => {
         input.focus();
       });
 
       expect(handleFocus.callCount).to.equal(1);
       expect(handleFocus.returnValues[0]).to.equal('focus');
 
-      act(() => {
+      await act(async () => {
         input.blur();
       });
 
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
index f0279b38dd8ee4..14137bf7fba154 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
@@ -77,11 +77,11 @@ describe('<AccordionSummary />', () => {
     );
   });
 
-  it('should fire onBlur when the button blurs', () => {
+  it('should fire onBlur when the button blurs', async () => {
     const handleBlur = spy();
     const { getByRole } = render(<AccordionSummary onBlur={handleBlur} />);
 
-    act(() => {
+    await act(async () => {
       const button = getByRole('button');
       button.focus();
       button.blur();
@@ -99,7 +99,7 @@ describe('<AccordionSummary />', () => {
     expect(handleClick.callCount).to.equal(1);
   });
 
-  it('fires onChange of the Accordion if clicked', () => {
+  it('fires onChange of the Accordion if clicked', async () => {
     const handleChange = spy();
     const { getByRole } = render(
       <Accordion onChange={handleChange} expanded={false}>
@@ -107,14 +107,14 @@ describe('<AccordionSummary />', () => {
       </Accordion>,
     );
 
-    act(() => {
+    await act(async () => {
       getByRole('button').click();
     });
 
     expect(handleChange.callCount).to.equal(1);
   });
 
-  it('calls onFocusVisible if focused visibly', function test() {
+  it('calls onFocusVisible if focused visibly', async function test() {
     if (/jsdom/.test(window.navigator.userAgent)) {
       // JSDOM doesn't support :focus-visible
       this.skip();
@@ -127,7 +127,7 @@ describe('<AccordionSummary />', () => {
 
     // this doesn't actually apply focus like in the browser. we need to move focus manually
     fireEvent.keyDown(document.body, { key: 'Tab' });
-    act(() => {
+    await act(async () => {
       getByRole('button').focus();
     });
 
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 4184039129eb83..a8d7ecf26af1b8 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -49,6 +49,7 @@ describe('<Autocomplete />', () => {
       open
       renderInput={(params) => <TextField {...params} />}
     />,
+
     () => ({
       classes,
       inheritComponent: 'div',
@@ -75,6 +76,7 @@ describe('<Autocomplete />', () => {
       open
       renderInput={(params) => <TextField {...params} />}
     />,
+
     () => ({
       classes,
       render,
@@ -95,6 +97,7 @@ describe('<Autocomplete />', () => {
       open
       renderInput={(params) => <TextField {...params} />}
     />,
+
     () => ({
       classes,
       render,
@@ -158,20 +161,20 @@ describe('<Autocomplete />', () => {
   });
 
   describe('combobox', () => {
-    it('should clear the input when blur', () => {
+    it('should clear the input when blur', async () => {
       const { getByRole } = render(
         <Autocomplete options={[]} renderInput={(params) => <TextField {...params} />} />,
       );
       const input = getByRole('combobox');
 
-      act(() => {
+      await act(async () => {
         input.focus();
         fireEvent.change(document.activeElement, { target: { value: 'a' } });
       });
 
       expect(input.value).to.equal('a');
 
-      act(() => {
+      await act(async () => {
         document.activeElement.blur();
       });
       expect(input.value).to.equal('');
@@ -295,7 +298,7 @@ describe('<Autocomplete />', () => {
     });
 
     // https://github.com/mui/material-ui/issues/34998
-    it('should scroll the listbox to the top when keyboard highlight wraps around after the last item is highlighted', function test() {
+    it('should scroll the listbox to the top when keyboard highlight wraps around after the last item is highlighted', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
@@ -313,7 +316,7 @@ describe('<Autocomplete />', () => {
         />,
       );
       const textbox = getByRole('combobox');
-      act(() => {
+      await act(async () => {
         textbox.focus();
       });
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
@@ -392,7 +395,7 @@ describe('<Autocomplete />', () => {
   });
 
   describe('prop: limitTags', () => {
-    it('show all items on focus', () => {
+    it('show all items on focus', async () => {
       const { container, getAllByRole, getByRole } = render(
         <Autocomplete
           multiple
@@ -407,7 +410,7 @@ describe('<Autocomplete />', () => {
       // include hidden clear button because JSDOM thinks it's visible
       expect(getAllByRole('button', { hidden: true })).to.have.lengthOf(4);
 
-      act(() => {
+      await act(async () => {
         getByRole('combobox').focus();
       });
       expect(container.textContent).to.equal('onetwothree');
@@ -417,7 +420,7 @@ describe('<Autocomplete />', () => {
       }
     });
 
-    it('show 0 item on close when set 0 to limitTags', () => {
+    it('show 0 item on close when set 0 to limitTags', async () => {
       const { container, getAllByRole, getByRole } = render(
         <Autocomplete
           multiple
@@ -432,7 +435,7 @@ describe('<Autocomplete />', () => {
       // include hidden clear button because JSDOM thinks it's visible
       expect(getAllByRole('button', { hidden: true })).to.have.lengthOf(2);
 
-      act(() => {
+      await act(async () => {
         getByRole('combobox').focus();
       });
       expect(container.textContent).to.equal('onetwothree');
@@ -444,7 +447,7 @@ describe('<Autocomplete />', () => {
   });
 
   describe('prop: filterSelectedOptions', () => {
-    it('when the last item is selected, highlights the new last item', () => {
+    it('when the last item is selected, highlights the new last item', async () => {
       const { getByRole } = render(
         <Autocomplete
           filterSelectedOptions
@@ -459,7 +462,7 @@ describe('<Autocomplete />', () => {
       checkHighlightIs(getByRole('listbox'), 'three');
       fireEvent.keyDown(textbox, { key: 'Enter' }); // selects the last option (three)
 
-      act(() => {
+      await act(async () => {
         textbox.blur();
         textbox.focus(); // opens the listbox again
       });
@@ -468,7 +471,7 @@ describe('<Autocomplete />', () => {
   });
 
   describe('prop: autoSelect', () => {
-    it('should not clear on blur when value does not match any option', () => {
+    it('should not clear on blur when value does not match any option', async () => {
       const handleChange = spy();
       const options = ['one', 'two'];
       render(
@@ -485,7 +488,7 @@ describe('<Autocomplete />', () => {
       fireEvent.change(textbox, { target: { value: 'o' } });
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       fireEvent.change(textbox, { target: { value: 'oo' } });
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
 
@@ -493,7 +496,7 @@ describe('<Autocomplete />', () => {
       expect(handleChange.args[0][1]).to.deep.equal('oo');
     });
 
-    it('should add new value when autoSelect & multiple on blur', () => {
+    it('should add new value when autoSelect & multiple on blur', async () => {
       const handleChange = spy();
       const options = ['one', 'two'];
       render(
@@ -509,7 +512,7 @@ describe('<Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
 
-      act(() => {
+      await act(async () => {
         fireEvent.change(textbox, { target: { value: 't' } });
         fireEvent.keyDown(textbox, { key: 'ArrowDown' });
         textbox.blur();
@@ -519,7 +522,7 @@ describe('<Autocomplete />', () => {
       expect(handleChange.args[0][1]).to.deep.equal(options);
     });
 
-    it('should add new value when autoSelect & multiple & freeSolo on blur', () => {
+    it('should add new value when autoSelect & multiple & freeSolo on blur', async () => {
       const handleChange = spy();
       render(
         <Autocomplete
@@ -533,7 +536,7 @@ describe('<Autocomplete />', () => {
       );
 
       fireEvent.change(document.activeElement, { target: { value: 'a' } });
-      act(() => {
+      await act(async () => {
         document.activeElement.blur();
       });
 
@@ -543,7 +546,7 @@ describe('<Autocomplete />', () => {
   });
 
   describe('prop: multiple', () => {
-    it('should not crash', () => {
+    it('should not crash', async () => {
       const { getByRole } = render(
         <Autocomplete
           openOnFocus
@@ -554,7 +557,7 @@ describe('<Autocomplete />', () => {
       );
       const input = getByRole('combobox');
 
-      act(() => {
+      await act(async () => {
         input.focus();
         document.activeElement.blur();
         input.focus();
@@ -769,6 +772,7 @@ describe('<Autocomplete />', () => {
             renderInput={(params) => <TextField {...params} required />}
             value={[]}
           />
+
           <button type="submit">Submit</button>
         </form>,
       );
@@ -795,6 +799,7 @@ describe('<Autocomplete />', () => {
             renderInput={(params) => <TextField {...params} required />}
             value={['one']}
           />
+
           <button type="submit">Submit</button>
         </form>,
       );
@@ -1245,7 +1250,7 @@ describe('<Autocomplete />', () => {
   });
 
   describe('prop: clearOnBlur', () => {
-    it('should clear on blur', () => {
+    it('should clear on blur', async () => {
       render(
         <Autocomplete
           clearOnBlur
@@ -1256,13 +1261,13 @@ describe('<Autocomplete />', () => {
       const textbox = screen.getByRole('combobox');
       fireEvent.change(textbox, { target: { value: 'test' } });
       expect(document.activeElement.value).to.equal('test');
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       expect(textbox.value).to.equal('');
     });
 
-    it('should not clear on blur', () => {
+    it('should not clear on blur', async () => {
       render(
         <Autocomplete
           clearOnBlur={false}
@@ -1273,13 +1278,13 @@ describe('<Autocomplete />', () => {
       const textbox = screen.getByRole('combobox');
       fireEvent.change(textbox, { target: { value: 'test' } });
       expect(document.activeElement.value).to.equal('test');
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       expect(textbox.value).to.equal('test');
     });
 
-    it('should not clear on blur with `multiple` enabled', () => {
+    it('should not clear on blur with `multiple` enabled', async () => {
       render(
         <Autocomplete
           multiple
@@ -1292,7 +1297,7 @@ describe('<Autocomplete />', () => {
       const textbox = screen.getByRole('combobox');
       fireEvent.change(textbox, { target: { value: 'test' } });
       expect(document.activeElement.value).to.equal('test');
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       expect(textbox.value).to.equal('test');
@@ -1404,7 +1409,7 @@ describe('<Autocomplete />', () => {
   });
 
   describe('prop: openOnFocus', () => {
-    it('enables open on input focus', () => {
+    it('enables open on input focus', async () => {
       const { getByRole } = render(
         <Autocomplete
           options={['one', 'two', 'three']}
@@ -1421,7 +1426,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(textbox);
       expect(textbox).to.have.attribute('aria-expanded', 'false');
 
-      act(() => {
+      await act(async () => {
         document.activeElement.blur();
       });
 
@@ -1694,7 +1699,7 @@ describe('<Autocomplete />', () => {
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
     });
 
-    it('should close the popup when disabled is true', () => {
+    it('should close the popup when disabled is true', async () => {
       const { setProps } = render(
         <Autocomplete
           options={['one', 'two', 'three']}
@@ -1702,7 +1707,7 @@ describe('<Autocomplete />', () => {
         />,
       );
       const textbox = screen.getByRole('combobox');
-      act(() => {
+      await act(async () => {
         textbox.focus();
       });
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
@@ -1711,7 +1716,7 @@ describe('<Autocomplete />', () => {
       expect(screen.queryByRole('listbox')).to.equal(null);
     });
 
-    it('should not crash when autoSelect & freeSolo are set, text is focused & disabled gets truthy', () => {
+    it('should not crash when autoSelect & freeSolo are set, text is focused & disabled gets truthy', async () => {
       const { setProps } = render(
         <Autocomplete
           autoSelect
@@ -1722,7 +1727,7 @@ describe('<Autocomplete />', () => {
         />,
       );
       const textbox = screen.getByRole('combobox');
-      act(() => {
+      await act(async () => {
         textbox.focus();
       });
       setProps({ disabled: true });
@@ -1785,6 +1790,7 @@ describe('<Autocomplete />', () => {
         { id: '10', text: 'One' },
         { id: '20', text: 'Two' },
       ];
+
       const options = [
         { id: '10', text: 'One' },
         { id: '20', text: 'Two' },
@@ -1821,6 +1827,7 @@ describe('<Autocomplete />', () => {
         { group: 2, value: 'F' },
         { group: 1, value: 'C' },
       ];
+
       expect(() => {
         render(
           <Autocomplete
@@ -2037,6 +2044,7 @@ describe('<Autocomplete />', () => {
           label: 'one',
         },
       ];
+
       const handleChange = spy();
       const { getByRole } = render(
         <Autocomplete
@@ -2175,7 +2183,7 @@ describe('<Autocomplete />', () => {
       expect(textbox.selectionEnd).to.equal(3);
     });
 
-    it('should focus the input when clicking on the open action', () => {
+    it('should focus the input when clicking on the open action', async () => {
       const { getByRole, queryByTitle } = render(
         <Autocomplete
           value="one"
@@ -2188,7 +2196,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(textbox);
       expect(textbox).toHaveFocus();
 
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       fireEvent.click(queryByTitle('Open'));
@@ -2232,7 +2240,7 @@ describe('<Autocomplete />', () => {
       expect(textbox).to.have.attribute('aria-expanded', 'true');
     });
 
-    it('should not focus when tooltip clicked', () => {
+    it('should not focus when tooltip clicked', async () => {
       const { getByRole, getByText } = render(
         <Autocomplete
           options={['one', 'two', 'three']}
@@ -2259,7 +2267,7 @@ describe('<Autocomplete />', () => {
       const textbox = getByRole('combobox');
       const tooltip = getByText('tooltip');
 
-      act(() => {
+      await act(async () => {
         fireEvent.click(tooltip);
       });
 
@@ -2528,7 +2536,7 @@ describe('<Autocomplete />', () => {
       expect(handleChange.args[0][3]).to.deep.equal({ option: options[2] });
     });
 
-    it('provides a reason and details on blur', () => {
+    it('provides a reason and details on blur', async () => {
       const handleChange = spy();
       const options = ['one', 'two', 'three'];
       render(
@@ -2543,7 +2551,7 @@ describe('<Autocomplete />', () => {
 
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
 
@@ -2610,6 +2618,7 @@ describe('<Autocomplete />', () => {
               renderInput={(params) => <TextField {...params} autoFocus />}
               value={value}
             />
+
             <button onClick={() => setValue(options[1])} type="button">
               Reset
             </button>
@@ -3229,7 +3238,7 @@ describe('<Autocomplete />', () => {
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
     });
 
-    it('should focus on input when clicked', () => {
+    it('should focus on input when clicked', async () => {
       render(
         <Autocomplete
           readOnly
@@ -3243,7 +3252,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(textbox);
       expect(textbox).toHaveFocus();
 
-      act(() => {
+      await act(async () => {
         textbox.blur();
       });
       fireEvent.click(screen.queryByTitle('Open'));
@@ -3264,7 +3273,7 @@ describe('<Autocomplete />', () => {
       expect(screen.queryByRole('listbox')).to.equal(null);
     });
 
-    it('should not be able to delete the tag when multiple=true', () => {
+    it('should not be able to delete the tag when multiple=true', async () => {
       const { container } = render(
         <Autocomplete
           readOnly
@@ -3279,7 +3288,7 @@ describe('<Autocomplete />', () => {
       expect(chip).not.to.have.class(chipClasses.deletable);
 
       const textbox = screen.getByRole('combobox');
-      act(() => {
+      await act(async () => {
         textbox.focus();
       });
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(2);
@@ -3287,7 +3296,7 @@ describe('<Autocomplete />', () => {
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(2);
     });
 
-    it('should not be able to delete the tag using Backspace when using renderValue', () => {
+    it('should not be able to delete the tag using Backspace when using renderValue', async () => {
       const { container } = render(
         <Autocomplete
           readOnly
@@ -3304,7 +3313,7 @@ describe('<Autocomplete />', () => {
       expect(chip).not.to.have.class(chipClasses.deletable);
 
       const textbox = screen.getByRole('combobox');
-      act(() => {
+      await act(async () => {
         textbox.focus();
       });
 
@@ -3443,7 +3452,7 @@ describe('<Autocomplete />', () => {
   });
 
   // https://github.com/mui/material-ui/issues/36212
-  it('should preserve scrollTop position of the listbox when adding new options on mobile', function test() {
+  it('should preserve scrollTop position of the listbox when adding new options on mobile', async function test() {
     if (/jsdom/.test(window.navigator.userAgent)) {
       this.skip();
     }
@@ -3466,7 +3475,7 @@ describe('<Autocomplete />', () => {
     expect(listbox).to.have.property('scrollTop', 0);
 
     const options = getAllByRole('option');
-    act(() => {
+    await act(async () => {
       fireEvent.touchStart(options[1]);
       listbox.scrollBy(0, 60);
       setProps({ options: getOptions(10) });
diff --git a/packages/mui-material/src/Backdrop/Backdrop.test.js b/packages/mui-material/src/Backdrop/Backdrop.test.js
index 3deb51045e6866..4aaf7572404175 100644
--- a/packages/mui-material/src/Backdrop/Backdrop.test.js
+++ b/packages/mui-material/src/Backdrop/Backdrop.test.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createRenderer } from '@mui/internal-test-utils';
+import { spy, useFakeTimers } from 'sinon';
+import { createRenderer, act } from '@mui/internal-test-utils';
 import Backdrop, { backdropClasses as classes } from '@mui/material/Backdrop';
 import Fade from '@mui/material/Fade';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Backdrop />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   describeConformance(<Backdrop open />, () => ({
     classes,
@@ -37,9 +37,30 @@ describe('<Backdrop />', () => {
   });
 
   describe('prop: transitionDuration', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
 
-    it('delays appearance of its children', () => {
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
+
+    it('delays appearance of its children', async () => {
       const handleEntered = spy();
       render(
         <Backdrop open transitionDuration={1954} onEntered={handleEntered}>
@@ -49,7 +70,9 @@ describe('<Backdrop />', () => {
 
       expect(handleEntered.callCount).to.equal(0);
 
-      clock.tick(1954);
+      await act(async () => {
+        await timer.tickAsync(1954);
+      });
 
       expect(handleEntered.callCount).to.equal(1);
     });
diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.test.js b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.test.js
index 3308455a9c7e24..942398ce772493 100644
--- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.test.js
+++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.test.js
@@ -59,7 +59,7 @@ describe('<Breadcrumbs />', () => {
     expect(getByRole('button').querySelector('[data-testid="MoreHorizIcon"]')).not.to.equal(null);
   });
 
-  it('should expand when `BreadcrumbCollapsed` is clicked', () => {
+  it('should expand when `BreadcrumbCollapsed` is clicked', async () => {
     const { getAllByRole, getByRole, getByText } = render(
       <Breadcrumbs>
         <span tabIndex={-1}>first</span>
@@ -74,7 +74,7 @@ describe('<Breadcrumbs />', () => {
       </Breadcrumbs>,
     );
 
-    act(() => {
+    await act(async () => {
       getByRole('button').click();
     });
 
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.test.js b/packages/mui-material/src/ButtonBase/ButtonBase.test.js
index 280c78a13e41c9..cf35e51b143dc8 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.test.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.test.js
@@ -256,7 +256,7 @@ describe('<ButtonBase />', () => {
     });
 
     describe('interactions', () => {
-      it('should not have a focus ripple by default', () => {
+      it('should not have a focus ripple by default', async () => {
         const { getByRole } = render(
           <ButtonBase
             TouchRippleProps={{
@@ -269,7 +269,7 @@ describe('<ButtonBase />', () => {
         const button = getByRole('button');
         simulatePointerDevice();
 
-        focusVisible(button);
+        await focusVisible(button);
 
         expect(button.querySelectorAll('.ripple-pulsate')).to.have.lengthOf(0);
       });
@@ -744,7 +744,7 @@ describe('<ButtonBase />', () => {
       expect(getByText('Hello')).to.have.property('disabled', true);
     });
 
-    it('should reset the focused state', function test() {
+    it('should reset the focused state', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // JSDOM doesn't support :focus-visible
         this.skip();
@@ -754,7 +754,7 @@ describe('<ButtonBase />', () => {
       const button = getByText('Hello');
       simulatePointerDevice();
 
-      focusVisible(button);
+      await focusVisible(button);
 
       expect(button).to.have.class(classes.focusVisible);
 
@@ -839,12 +839,12 @@ describe('<ButtonBase />', () => {
         expect(button).not.to.have.class(classes.focusVisible);
       }
 
-      focusVisible(button);
+      await focusVisible(button);
 
       expect(button).to.have.class(classes.focusVisible);
     });
 
-    it('removes focus-visible if focus is re-targetted', function test() {
+    it('removes focus-visible if focus is re-targetted', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // JSDOM doesn't support :focus-visible
         this.skip();
@@ -887,14 +887,14 @@ describe('<ButtonBase />', () => {
       const focusRetarget = getByText('you cannot escape me');
       simulatePointerDevice();
 
-      focusVisible(buttonBase);
+      await focusVisible(buttonBase);
 
       expect(focusRetarget).toHaveFocus();
       expect(eventLog).to.deep.equal(['focus-visible', 'focus', 'blur']);
       expect(buttonBase).not.to.have.class(classes.focusVisible);
     });
 
-    it('onFocusVisibleHandler() should propagate call to onFocusVisible prop', function test() {
+    it('onFocusVisibleHandler() should propagate call to onFocusVisible prop', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // JSDOM doesn't support :focus-visible
         this.skip();
@@ -908,7 +908,7 @@ describe('<ButtonBase />', () => {
       );
       simulatePointerDevice();
 
-      focusVisible(getByRole('button'));
+      await focusVisible(getByRole('button'));
 
       expect(onFocusVisibleSpy.calledOnce).to.equal(true);
       expect(onFocusVisibleSpy.firstCall.args).to.have.lengthOf(1);
diff --git a/packages/mui-material/src/ButtonBase/Ripple.test.js b/packages/mui-material/src/ButtonBase/Ripple.test.js
index a0ff4d03b7166b..8e875ed84f6adf 100644
--- a/packages/mui-material/src/ButtonBase/Ripple.test.js
+++ b/packages/mui-material/src/ButtonBase/Ripple.test.js
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createRenderer } from '@mui/internal-test-utils';
+import { spy, useFakeTimers } from 'sinon';
+import { createRenderer, act } from '@mui/internal-test-utils';
 import Ripple from './Ripple';
 import classes from './touchRippleClasses';
 
 describe('<Ripple />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   it('should have the ripple className', () => {
     const { container } = render(
@@ -80,9 +80,30 @@ describe('<Ripple />', () => {
   });
 
   describe('pulsating and stopping 2', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
-    it('handleExit should trigger a timer', () => {
+    it('handleExit should trigger a timer', async () => {
       const handleExited = spy();
       const { setProps } = render(
         <Ripple
@@ -98,13 +119,17 @@ describe('<Ripple />', () => {
       );
 
       setProps({ in: false });
-      clock.tick(549);
+      await React.act(async () => {
+        await timer.tickAsync(549);
+      });
       expect(handleExited.callCount).to.equal(0);
-      clock.tick(1);
+      await act(async () => {
+        await timer.tickAsync(1);
+      });
       expect(handleExited.callCount).to.equal(1);
     });
 
-    it('unmount should defuse the handleExit timer', () => {
+    it('unmount should defuse the handleExit timer', async () => {
       const handleExited = spy();
       const { setProps, unmount } = render(
         <Ripple
@@ -121,7 +146,9 @@ describe('<Ripple />', () => {
 
       setProps({ in: false });
       unmount();
-      clock.tick(550);
+      await act(async () => {
+        await timer.tickAsync(550);
+      });
       expect(handleExited.callCount).to.equal(0);
     });
   });
diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.test.js b/packages/mui-material/src/ButtonBase/TouchRipple.test.js
index c2948f1b3dd481..9ea086c499b618 100644
--- a/packages/mui-material/src/ButtonBase/TouchRipple.test.js
+++ b/packages/mui-material/src/ButtonBase/TouchRipple.test.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import { useFakeTimers } from 'sinon';
 import { act, createRenderer } from '@mui/internal-test-utils';
 import TouchRipple, { DELAY_RIPPLE } from './TouchRipple';
 import describeConformance from '../../test/describeConformance';
@@ -7,7 +8,7 @@ import describeConformance from '../../test/describeConformance';
 const cb = () => {};
 
 describe('<TouchRipple />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   /**
    * @param {object} other props to spread to TouchRipple
@@ -58,10 +59,10 @@ describe('<TouchRipple />', () => {
   }));
 
   describe('prop: center', () => {
-    it('should compute the right ripple dimensions', () => {
+    it('should compute the right ripple dimensions', async () => {
       const { instance, queryRipple } = renderTouchRipple({ center: true });
 
-      act(() => {
+      await act(async () => {
         instance.start(
           {},
           {
@@ -76,48 +77,48 @@ describe('<TouchRipple />', () => {
     });
   });
 
-  it('should create individual ripples', () => {
+  it('should create individual ripples', async () => {
     const { instance, queryAllActiveRipples, queryAllStoppingRipples } = renderTouchRipple();
 
     expect(queryAllActiveRipples()).to.have.lengthOf(0);
     expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-    act(() => {
+    await act(async () => {
       instance.start({ clientX: 0, clientY: 0 }, cb);
     });
 
     expect(queryAllActiveRipples()).to.have.lengthOf(1);
     expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-    act(() => {
+    await act(async () => {
       instance.start({ clientX: 0, clientY: 0 }, cb);
     });
 
     expect(queryAllActiveRipples()).to.have.lengthOf(2);
     expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-    act(() => {
+    await act(async () => {
       instance.start({ clientX: 0, clientY: 0 }, cb);
     });
 
     expect(queryAllActiveRipples()).to.have.lengthOf(3);
     expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-    act(() => {
+    await act(async () => {
       instance.stop({ type: 'mouseup' });
     });
 
     expect(queryAllActiveRipples()).to.have.lengthOf(2);
     expect(queryAllStoppingRipples()).to.have.lengthOf(1);
 
-    act(() => {
+    await act(async () => {
       instance.stop({ type: 'mouseup' });
     });
 
     expect(queryAllActiveRipples()).to.have.lengthOf(1);
     expect(queryAllStoppingRipples()).to.have.lengthOf(2);
 
-    act(() => {
+    await act(async () => {
       instance.stop({ type: 'mouseup' });
     });
 
@@ -126,10 +127,10 @@ describe('<TouchRipple />', () => {
   });
 
   describe('creating unique ripples', () => {
-    it('should create a ripple', () => {
+    it('should create a ripple', async () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } = renderTouchRipple();
 
-      act(() => {
+      await act(async () => {
         instance.start(
           {},
           {
@@ -144,10 +145,10 @@ describe('<TouchRipple />', () => {
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
     });
 
-    it('should ignore a mousedown event after a touchstart event', () => {
+    it('should ignore a mousedown event after a touchstart event', async () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } = renderTouchRipple();
 
-      act(() => {
+      await act(async () => {
         instance.start({ type: 'touchstart' }, cb);
         instance.start({ type: 'mousedown' }, cb);
       });
@@ -156,7 +157,7 @@ describe('<TouchRipple />', () => {
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
     });
 
-    it('should create a specific ripple', () => {
+    it('should create a specific ripple', async () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples, queryRipple } =
         renderTouchRipple({
           center: true,
@@ -164,7 +165,7 @@ describe('<TouchRipple />', () => {
       const clientX = 1;
       const clientY = 1;
 
-      act(() => {
+      await act(async () => {
         instance.start({ clientX, clientY }, { fakeElement: true }, cb);
       });
 
@@ -176,28 +177,51 @@ describe('<TouchRipple />', () => {
   });
 
   describe('mobile', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
 
-    it('should delay the display of the ripples', () => {
+    afterEach(() => {
+      timer?.restore();
+    });
+
+    it('should delay the display of the ripples', async () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } = renderTouchRipple();
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      act(() => {
+      await act(async () => {
         instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true }, cb);
       });
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      clock.tick(DELAY_RIPPLE);
+      await act(async () => {
+        await timer?.tickAsync(DELAY_RIPPLE);
+      });
 
       expect(queryAllActiveRipples()).to.have.lengthOf(1);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      clock.tick(DELAY_RIPPLE);
-      act(() => {
+      await act(async () => {
+        await timer?.tickAsync(DELAY_RIPPLE);
         instance.stop({ type: 'touchend' }, cb);
       });
 
@@ -205,38 +229,42 @@ describe('<TouchRipple />', () => {
       expect(queryAllStoppingRipples()).to.have.lengthOf(1);
     });
 
-    it('should trigger the ripple for short touch interactions', () => {
+    it('should trigger the ripple for short touch interactions', async () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } = renderTouchRipple();
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      act(() => {
+      await act(async () => {
         instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true }, cb);
       });
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      clock.tick(DELAY_RIPPLE / 2);
+      await act(async () => {
+        await timer?.tickAsync(DELAY_RIPPLE / 2);
+      });
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      act(() => {
+      await act(async () => {
         instance.stop({ type: 'touchend' }, cb);
       });
 
       expect(queryAllActiveRipples()).to.have.lengthOf(1);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      clock.tick(1);
+      await act(async () => {
+        await timer?.tickAsync(1);
+      });
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(1);
     });
 
-    it('should interrupt the ripple schedule', () => {
+    it('should interrupt the ripple schedule', async () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } = renderTouchRipple();
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
@@ -246,17 +274,21 @@ describe('<TouchRipple />', () => {
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      clock.tick(DELAY_RIPPLE / 2);
+      await act(async () => {
+        await timer?.tickAsync(DELAY_RIPPLE / 2);
+      });
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
 
-      instance.stop({ type: 'touchmove' });
-      clock.tick(DELAY_RIPPLE);
+      await act(async () => {
+        instance.stop({ type: 'touchmove' });
+        await timer?.tickAsync(DELAY_RIPPLE);
+      });
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
     });
 
-    it('should not leak on multi-touch', function multiTouchTest() {
+    it('should not leak on multi-touch', async function multiTouchTest() {
       const { instance, unmount } = renderTouchRipple();
 
       instance.start({ type: 'touchstart', touches: [{}] }, () => {});
@@ -265,7 +297,9 @@ describe('<TouchRipple />', () => {
 
       // expect this to run gracefully without
       // "react state update on an unmounted component"
-      clock.runAll();
+      await act(async () => {
+        await timer?.runAllAsync();
+      });
     });
 
     it('should handle empty event.touches', () => {
diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js
index 49599c9108aede..bab172f62c6c31 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.test.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.test.js
@@ -54,11 +54,11 @@ describe('<Checkbox />', () => {
     expect(getByRole('checkbox')).to.have.property('checked', true);
   });
 
-  it('flips the checked property when clicked and calls onchange with the checked state', () => {
+  it('flips the checked property when clicked and calls onchange with the checked state', async () => {
     const handleChange = spy();
     const { getByRole } = render(<Checkbox onChange={handleChange} />);
 
-    act(() => {
+    await act(async () => {
       getByRole('checkbox').click();
     });
 
@@ -66,7 +66,7 @@ describe('<Checkbox />', () => {
     expect(handleChange.callCount).to.equal(1);
     expect(handleChange.getCall(0).args[0].target).to.have.property('checked', true);
 
-    act(() => {
+    await act(async () => {
       getByRole('checkbox').click();
     });
 
diff --git a/packages/mui-material/src/Chip/Chip.test.js b/packages/mui-material/src/Chip/Chip.test.js
index aa695a6de9aabb..c609414eb00eb6 100644
--- a/packages/mui-material/src/Chip/Chip.test.js
+++ b/packages/mui-material/src/Chip/Chip.test.js
@@ -174,7 +174,7 @@ describe('<Chip />', () => {
       expect(chip).to.have.class(classes.filledPrimary);
     });
 
-    it('should not be focused when a deletable chip is disabled and skipFocusWhenDisabled is true', () => {
+    it('should not be focused when a deletable chip is disabled and skipFocusWhenDisabled is true', async () => {
       const { getByTestId } = render(
         <Chip
           label="My Chip"
@@ -188,7 +188,7 @@ describe('<Chip />', () => {
       const chip = getByTestId('chip');
 
       simulatePointerDevice();
-      act(() => {
+      await act(async () => {
         fireEvent.keyDown(document.body, { key: 'Tab' });
       });
 
@@ -431,11 +431,11 @@ describe('<Chip />', () => {
   });
 
   describe('reacts to keyboard chip', () => {
-    it('should call onKeyDown when a key is pressed', () => {
+    it('should call onKeyDown when a key is pressed', async () => {
       const handleKeydown = stub().callsFake((event) => event.key);
       const { getByRole } = render(<Chip onClick={() => {}} onKeyDown={handleKeydown} />);
       const chip = getByRole('button');
-      act(() => {
+      await act(async () => {
         chip.focus();
       });
 
@@ -445,11 +445,11 @@ describe('<Chip />', () => {
       expect(handleKeydown.firstCall.returnValue).to.equal('p');
     });
 
-    it('should call onClick when `space` is released ', () => {
+    it('should call onClick when `space` is released ', async () => {
       const handleClick = spy();
       const { getByRole } = render(<Chip onClick={handleClick} />);
       const chip = getByRole('button');
-      act(() => {
+      await act(async () => {
         chip.focus();
       });
 
@@ -458,11 +458,11 @@ describe('<Chip />', () => {
       expect(handleClick.callCount).to.equal(1);
     });
 
-    it('should call onClick when `enter` is pressed ', () => {
+    it('should call onClick when `enter` is pressed ', async () => {
       const handleClick = spy();
       const { getByRole } = render(<Chip onClick={handleClick} />);
       const chip = getByRole('button');
-      act(() => {
+      await act(async () => {
         chip.focus();
       });
 
@@ -473,14 +473,14 @@ describe('<Chip />', () => {
 
     describe('prop: onDelete', () => {
       ['Backspace', 'Delete'].forEach((key) => {
-        it(`should call onDelete '${key}' is released`, () => {
+        it(`should call onDelete '${key}' is released`, async () => {
           const handleDelete = spy();
           const handleKeyDown = spy();
           const { getAllByRole } = render(
             <Chip onClick={() => {}} onKeyDown={handleKeyDown} onDelete={handleDelete} />,
           );
           const chip = getAllByRole('button')[0];
-          act(() => {
+          await act(async () => {
             chip.focus();
           });
 
@@ -497,12 +497,12 @@ describe('<Chip />', () => {
         });
       });
 
-      it('should not prevent default on input', () => {
+      it('should not prevent default on input', async () => {
         const handleKeyDown = spy();
         const { container } = render(<Chip label={<input />} onKeyDown={handleKeyDown} />);
         const input = container.querySelector('input');
 
-        act(() => {
+        await act(async () => {
           input.focus();
         });
         fireEvent.keyDown(input, { key: 'Backspace' });
@@ -671,14 +671,14 @@ describe('<Chip />', () => {
       }
     });
 
-    it('has a focus-visible polyfill', () => {
+    it('has a focus-visible polyfill', async () => {
       const { container } = render(<Chip label="Test Chip" onClick={() => {}} />);
       const chip = container.querySelector(`.${classes.root}`);
       simulatePointerDevice();
 
       expect(chip).not.to.have.class(classes.focusVisible);
 
-      act(() => {
+      await act(async () => {
         chip.focus();
       });
 
@@ -688,17 +688,17 @@ describe('<Chip />', () => {
         expect(chip).not.to.have.class(classes.focusVisible);
       }
 
-      focusVisible(chip);
+      await focusVisible(chip);
 
       expect(chip).to.have.class(classes.focusVisible);
     });
 
-    it('should reset the focused state', () => {
+    it('should reset the focused state', async () => {
       const { container, setProps } = render(<Chip label="Test Chip" onClick={() => {}} />);
       const chip = container.querySelector(`.${classes.root}`);
 
       simulatePointerDevice();
-      focusVisible(chip);
+      await focusVisible(chip);
 
       expect(chip).to.have.class(classes.focusVisible);
 
diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js
index e0c4c3730a4a82..d104c1c004a571 100644
--- a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js
+++ b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import {
   act,
   createRenderer,
@@ -13,35 +13,60 @@ import Portal from '@mui/material/Portal';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 
 describe('<ClickAwayListener />', () => {
-  const { render: clientRender, clock } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render: clientRender } = createRenderer();
   /**
-   * @type  {typeof plainRender extends (...args: infer T) => any ? T : never} args
+   * @type  {typeof clientRender}
    *
    * @remarks
    * This is for all intents and purposes the same as our client render method.
-   * `plainRender` is already wrapped in act().
+   * `clientRender` is already wrapped in act().
    * However, React has a bug that flushes effects in a portal synchronously.
    * We have to defer the effect manually like `useEffect` would so we have to flush the effect manually instead of relying on `act()`.
    * React bug: https://github.com/facebook/react/issues/20074
    */
-  function render(...args) {
+  async function render(...args) {
     const result = clientRender(...args);
-    clock.tick(0);
+    await act(async () => {
+      await timer?.tickAsync(0);
+    });
     return result;
   }
 
-  it('should render the children', () => {
+  it('should render the children', async () => {
     const children = <span />;
-    const { container } = render(
+    const { container } = await render(
       <ClickAwayListener onClickAway={() => {}}>{children}</ClickAwayListener>,
     );
     expect(container.querySelectorAll('span').length).to.equal(1);
   });
 
   describe('prop: onClickAway', () => {
-    it('should be called when clicking away', () => {
+    it('should be called when clicking away', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway}>
           <span />
         </ClickAwayListener>,
@@ -52,9 +77,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.args[0].length).to.equal(1);
     });
 
-    it('should not be called when clicking inside', () => {
+    it('should not be called when clicking inside', async () => {
       const handleClickAway = spy();
-      const { container } = render(
+      const { container } = await render(
         <ClickAwayListener onClickAway={handleClickAway}>
           <span />
         </ClickAwayListener>,
@@ -64,9 +89,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.callCount).to.equal(0);
     });
 
-    it('should be called when preventDefault is `true`', () => {
+    it('should be called when preventDefault is `true`', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway}>
           <span />
         </ClickAwayListener>,
@@ -80,9 +105,9 @@ describe('<ClickAwayListener />', () => {
       document.body.removeEventListener('click', preventDefault);
     });
 
-    it('should not be called when clicking inside a portaled element', () => {
+    it('should not be called when clicking inside a portaled element', async () => {
       const handleClickAway = spy();
-      const { getByText } = render(
+      const { getByText } = await render(
         <ClickAwayListener onClickAway={handleClickAway}>
           <div>
             <Portal>
@@ -96,9 +121,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.callCount).to.equal(0);
     });
 
-    it('should be called when clicking inside a portaled element and `disableReactTree` is `true`', () => {
+    it('should be called when clicking inside a portaled element and `disableReactTree` is `true`', async () => {
       const handleClickAway = spy();
-      const { getByText } = render(
+      const { getByText } = await render(
         <ClickAwayListener onClickAway={handleClickAway} disableReactTree>
           <div>
             <Portal>
@@ -112,9 +137,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.callCount).to.equal(1);
     });
 
-    it('should not be called even if the event propagation is stopped', () => {
+    it('should not be called even if the event propagation is stopped', async () => {
       const handleClickAway = spy();
-      const { getByText } = render(
+      const { getByText } = await render(
         <ClickAwayListener onClickAway={handleClickAway} disableReactTree>
           <div>
             <div
@@ -159,7 +184,7 @@ describe('<ClickAwayListener />', () => {
     });
 
     ['onClick', 'onClickCapture'].forEach((eventListenerName) => {
-      it(`should not be called when ${eventListenerName} mounted the listener`, () => {
+      it(`should not be called when ${eventListenerName} mounted the listener`, async () => {
         function Test() {
           const [open, setOpen] = React.useState(false);
 
@@ -177,7 +202,7 @@ describe('<ClickAwayListener />', () => {
             </React.Fragment>
           );
         }
-        render(<Test />);
+        await render(<Test />);
 
         fireDiscreteEvent.click(screen.getByTestId('trigger'));
 
@@ -185,7 +210,7 @@ describe('<ClickAwayListener />', () => {
       });
     });
 
-    it('should be called if an element is interleaved between mousedown and mouseup', () => {
+    it('should be called if an element is interleaved between mousedown and mouseup', async () => {
       /**
        * @param {Element} element
        * @returns {Element[]}
@@ -240,7 +265,7 @@ describe('<ClickAwayListener />', () => {
           </ClickAwayListener>
         );
       }
-      render(<ClickAwayListenerMouseDownPortal />);
+      await render(<ClickAwayListenerMouseDownPortal />);
       const mouseDownTarget = screen.getByTestId('trigger');
 
       fireDiscreteEvent.mouseDown(mouseDownTarget);
@@ -255,9 +280,9 @@ describe('<ClickAwayListener />', () => {
   });
 
   describe('prop: mouseEvent', () => {
-    it('should not call `props.onClickAway` when `props.mouseEvent` is `false`', () => {
+    it('should not call `props.onClickAway` when `props.mouseEvent` is `false`', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway} mouseEvent={false}>
           <span />
         </ClickAwayListener>,
@@ -266,9 +291,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.callCount).to.equal(0);
     });
 
-    it('should call `props.onClickAway` when mouse down is triggered', () => {
+    it('should call `props.onClickAway` when mouse down is triggered', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onMouseDown">
           <span />
         </ClickAwayListener>,
@@ -280,9 +305,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.args[0].length).to.equal(1);
     });
 
-    it('should call `props.onClickAway` when mouse up is triggered', () => {
+    it('should call `props.onClickAway` when mouse up is triggered', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onMouseUp">
           <span />
         </ClickAwayListener>,
@@ -294,9 +319,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.args[0].length).to.equal(1);
     });
 
-    it('should call `props.onClickAway` when pointer down is triggered', () => {
+    it('should call `props.onClickAway` when pointer down is triggered', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onPointerDown">
           <span />
         </ClickAwayListener>,
@@ -308,9 +333,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.args[0].length).to.equal(1);
     });
 
-    it('should call `props.onClickAway` when pointer up is triggered', () => {
+    it('should call `props.onClickAway` when pointer up is triggered', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onPointerUp">
           <span />
         </ClickAwayListener>,
@@ -324,9 +349,9 @@ describe('<ClickAwayListener />', () => {
   });
 
   describe('prop: touchEvent', () => {
-    it('should not call `props.onClickAway` when `props.touchEvent` is `false`', () => {
+    it('should not call `props.onClickAway` when `props.touchEvent` is `false`', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway} touchEvent={false}>
           <span />
         </ClickAwayListener>,
@@ -335,9 +360,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.callCount).to.equal(0);
     });
 
-    it('should call `props.onClickAway` when the appropriate touch event is triggered', () => {
+    it('should call `props.onClickAway` when the appropriate touch event is triggered', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway} touchEvent="onTouchStart">
           <span />
         </ClickAwayListener>,
@@ -349,9 +374,9 @@ describe('<ClickAwayListener />', () => {
       expect(handleClickAway.args[0].length).to.equal(1);
     });
 
-    it('should ignore `touchend` when preceded by `touchmove` event', () => {
+    it('should ignore `touchend` when preceded by `touchmove` event', async () => {
       const handleClickAway = spy();
-      render(
+      await render(
         <ClickAwayListener onClickAway={handleClickAway} touchEvent="onTouchEnd">
           <span />
         </ClickAwayListener>,
@@ -368,10 +393,10 @@ describe('<ClickAwayListener />', () => {
     });
   });
 
-  it('should handle null child', () => {
+  it('should handle null child', async () => {
     const Child = React.forwardRef(() => null);
     const handleClickAway = spy();
-    render(
+    await render(
       <ClickAwayListener onClickAway={handleClickAway}>
         <Child />
       </ClickAwayListener>,
@@ -386,7 +411,7 @@ describe('<ClickAwayListener />', () => {
     ['onClickCapture', false],
     ['onClickCapture', true],
   ].forEach(([eventName, disableReactTree]) => {
-    it(`when 'disableRectTree=${disableReactTree}' ${eventName} triggers onClickAway if an outside target is removed`, function test() {
+    it(`when 'disableRectTree=${disableReactTree}' ${eventName} triggers onClickAway if an outside target is removed`, async function test() {
       if (!new Event('click').composedPath) {
         this.skip();
       }
@@ -404,16 +429,16 @@ describe('<ClickAwayListener />', () => {
           </React.Fragment>
         );
       }
-      render(<Test />);
+      await render(<Test />);
 
-      act(() => {
+      await act(async () => {
         screen.getByRole('button').click();
       });
 
       expect(handleClickAway.callCount).to.equal(1);
     });
 
-    it(`when 'disableRectTree=${disableReactTree}' ${eventName} does not trigger onClickAway if an inside target is removed`, function test() {
+    it(`when 'disableRectTree=${disableReactTree}' ${eventName} does not trigger onClickAway if an inside target is removed`, async function test() {
       if (!new Event('click').composedPath) {
         this.skip();
       }
@@ -429,9 +454,9 @@ describe('<ClickAwayListener />', () => {
           </ClickAwayListener>
         );
       }
-      render(<Test />);
+      await render(<Test />);
 
-      act(() => {
+      await act(async () => {
         screen.getByRole('button').click();
       });
 
diff --git a/packages/mui-material/src/Collapse/Collapse.test.js b/packages/mui-material/src/Collapse/Collapse.test.js
index 77d92ca254b1d3..fb3c87e048da4f 100644
--- a/packages/mui-material/src/Collapse/Collapse.test.js
+++ b/packages/mui-material/src/Collapse/Collapse.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy, stub } from 'sinon';
+import { spy, stub, useFakeTimers } from 'sinon';
 import { act, createRenderer } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -8,7 +8,7 @@ import Collapse, { collapseClasses as classes } from '@mui/material/Collapse';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Collapse />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   const defaultProps = {
     in: true,
@@ -47,7 +47,29 @@ describe('<Collapse />', () => {
   });
 
   describe('transition lifecycle', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
+
     let setProps;
     let collapse;
     let container;
@@ -98,7 +120,7 @@ describe('<Collapse />', () => {
       stub(collapse.firstChild, 'clientHeight').get(() => 666);
     });
 
-    it('should run in', () => {
+    it('should run in', async () => {
       setProps({ in: true });
       expect(nodeEnterHeightStyle).to.equal('0px');
       expect(handleEnter.args[0][0]).to.equal(collapse);
@@ -110,14 +132,17 @@ describe('<Collapse />', () => {
       expect(handleAddEndListener.callCount).to.equal(1);
       expect(handleAddEndListener.args[0][0]).to.equal(collapse);
       expect(typeof handleAddEndListener.args[0][1]).to.equal('function');
-      clock.tick(300);
+
+      await act(async () => {
+        await timer?.tickAsync(300);
+      });
 
       expect(handleEntered.args[0][0].style.height).to.equal('auto');
       expect(handleEntered.args[0][1]).to.equal(false);
       expect(handleEntered.callCount).to.equal(1);
     });
 
-    it('should run out', () => {
+    it('should run out', async () => {
       setProps({ in: true });
       setProps({ in: false });
 
@@ -125,10 +150,16 @@ describe('<Collapse />', () => {
       expect(handleExiting.args[0][0].style.height).to.equal('0px');
       expect(handleExiting.callCount).to.equal(1);
       expect(handleExiting.args[0][0]).to.equal(collapse);
-      clock.tick(300);
+
+      await act(async () => {
+        await timer?.tickAsync(300);
+      });
 
       expect(handleExited.args[0][0].style.height).to.equal('0px');
-      clock.tick(300);
+
+      await act(async () => {
+        await timer?.tickAsync(300);
+      });
 
       expect(handleExited.callCount).to.equal(1);
       expect(handleExited.args[0][0]).to.equal(collapse);
@@ -136,9 +167,30 @@ describe('<Collapse />', () => {
   });
 
   describe('prop: timeout', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
 
-    it('should delay based on height when timeout is auto', () => {
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
+
+    it('should delay based on height when timeout is auto', async () => {
       const theme = createTheme({
         transitions: {
           getAutoHeightDuration: (n) => n,
@@ -166,10 +218,16 @@ describe('<Collapse />', () => {
 
       const autoTransitionDuration = 10;
       expect(next1.callCount).to.equal(0);
-      clock.tick(0);
+
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
 
       expect(next1.callCount).to.equal(0);
-      clock.tick(autoTransitionDuration);
+
+      await act(async () => {
+        await timer?.tickAsync(autoTransitionDuration);
+      });
 
       expect(next1.callCount).to.equal(1);
 
@@ -182,12 +240,15 @@ describe('<Collapse />', () => {
       renderProps2.setProps({ in: true });
 
       expect(next2.callCount).to.equal(0);
-      clock.tick(0);
+
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
 
       expect(next2.callCount).to.equal(1);
     });
 
-    it('should use timeout as delay when timeout is number', () => {
+    it('should use timeout as delay when timeout is number', async () => {
       const timeout = 10;
       const next = spy();
       const { setProps } = render(
@@ -199,13 +260,13 @@ describe('<Collapse />', () => {
       setProps({ in: true });
 
       expect(next.callCount).to.equal(0);
-      act(() => {
-        clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
       });
 
       expect(next.callCount).to.equal(0);
-      act(() => {
-        clock.tick(timeout);
+      await act(async () => {
+        await timer?.tickAsync(timeout);
       });
 
       expect(next.callCount).to.equal(1);
diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index f04aee38ff943c..4fd06bdad9a8ab 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import Modal from '@mui/material/Modal';
 import Dialog, { dialogClasses as classes } from '@mui/material/Dialog';
@@ -12,8 +12,8 @@ import describeConformance from '../../test/describeConformance';
  * more comprehensive simulation of a user click (mousedown + click)
  * @param {HTMLElement} element
  */
-function userClick(element) {
-  act(() => {
+async function userClick(element) {
+  await act(async () => {
     fireEvent.mouseDown(element);
     fireEvent.mouseUp(element);
     element.click();
@@ -30,8 +30,8 @@ function findBackdrop(view) {
 /**
  * @param {typeof import('@mui/internal-test-utils').screen} view
  */
-function clickBackdrop(view) {
-  userClick(findBackdrop(view));
+async function clickBackdrop(view) {
+  await userClick(findBackdrop(view));
 }
 
 const CustomFade = React.forwardRef(function CustomFade(props, ref) {
@@ -39,7 +39,30 @@ const CustomFade = React.forwardRef(function CustomFade(props, ref) {
 });
 
 describe('<Dialog />', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   describeConformance(
     <Dialog open disablePortal>
@@ -116,7 +139,7 @@ describe('<Dialog />', () => {
     expect(getAllByTestId('Transition')).to.have.lengthOf(1);
   });
 
-  it('calls onClose when pressing Esc and removes the content after the specified duration', () => {
+  it('calls onClose when pressing Esc and removes the content after the specified duration', async () => {
     const onClose = spy();
     function TestCase() {
       const [open, close] = React.useReducer(() => false, true);
@@ -135,7 +158,7 @@ describe('<Dialog />', () => {
     const dialog = getByRole('dialog');
     expect(dialog).not.to.equal(null);
 
-    act(() => {
+    await act(async () => {
       dialog.click();
     });
 
@@ -144,7 +167,9 @@ describe('<Dialog />', () => {
     fireEvent.keyDown(document.activeElement, { key: 'Escape' });
     expect(onClose.calledOnce).to.equal(true);
 
-    clock.tick(100);
+    await act(async () => {
+      await timer?.tickAsync(100);
+    });
 
     expect(queryByRole('dialog')).to.equal(null);
   });
@@ -167,7 +192,7 @@ describe('<Dialog />', () => {
     expect(onClose.callCount).to.equal(1);
   });
 
-  it('can ignore backdrop click and Esc keydown', () => {
+  it('can ignore backdrop click and Esc keydown', async () => {
     function DialogWithBackdropClickDisabled(props) {
       const { onClose, ...other } = props;
       function handleClose(event, reason) {
@@ -192,7 +217,7 @@ describe('<Dialog />', () => {
     const dialog = getByRole('dialog');
     expect(dialog).not.to.equal(null);
 
-    act(() => {
+    await act(async () => {
       dialog.click();
       // keyDown is not targetted at anything specific.
       // eslint-disable-next-line material-ui/disallow-active-element-as-key-event-target
@@ -201,7 +226,7 @@ describe('<Dialog />', () => {
 
     expect(onClose.callCount).to.equal(0);
 
-    clickBackdrop(screen);
+    await clickBackdrop(screen);
     expect(onClose.callCount).to.equal(0);
   });
 
@@ -212,7 +237,7 @@ describe('<Dialog />', () => {
       expect(findBackdrop(screen)).to.have.attribute('role', 'presentation');
     });
 
-    it('calls onClose when clicked', () => {
+    it('calls onClose when clicked', async () => {
       const onClose = spy();
       render(
         <Dialog onClose={onClose} open>
@@ -220,7 +245,7 @@ describe('<Dialog />', () => {
         </Dialog>,
       );
 
-      clickBackdrop(screen);
+      await clickBackdrop(screen);
       expect(onClose.callCount).to.equal(1);
     });
 
diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index 347d57cbea8108..391fdaf0be53ce 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createRenderer, screen } from '@mui/internal-test-utils';
+import { spy, useFakeTimers } from 'sinon';
+import { createRenderer, screen, act } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Drawer, { drawerClasses as classes } from '@mui/material/Drawer';
 import { modalClasses } from '@mui/material/Modal';
@@ -9,7 +9,30 @@ import { getAnchor, isHorizontal } from './Drawer';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Drawer />', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   const CustomPaper = React.forwardRef(
     ({ className, children, ownerState, square, ...props }, ref) => (
@@ -133,7 +156,7 @@ describe('<Drawer />', () => {
         expect(backdropRoot).toHaveComputedStyle({ transitionDuration: '0.001s' });
       });
 
-      it('delay the slide transition to complete using values provided via prop', () => {
+      it('delay the slide transition to complete using values provided via prop', async () => {
         const handleEntered = spy();
         const { setProps } = render(
           <Drawer
@@ -149,7 +172,9 @@ describe('<Drawer />', () => {
 
         expect(handleEntered.callCount).to.equal(0);
 
-        clock.tick(transitionDuration.enter);
+        await act(async () => {
+          await timer?.tickAsync(transitionDuration.enter);
+        });
 
         expect(handleEntered.callCount).to.equal(1);
       });
@@ -193,7 +218,7 @@ describe('<Drawer />', () => {
         </Drawer>
       );
 
-      it('should open and close', () => {
+      it('should open and close', async () => {
         const { setProps } = render(drawerElement);
 
         setProps({ open: true });
@@ -201,7 +226,9 @@ describe('<Drawer />', () => {
         expect(screen.getByTestId('child')).not.to.equal(null);
 
         setProps({ open: false });
-        clock.tick(transitionDuration);
+        await act(async () => {
+          await timer?.tickAsync(transitionDuration);
+        });
 
         expect(screen.queryByTestId('child')).to.equal(null);
       });
@@ -220,7 +247,7 @@ describe('<Drawer />', () => {
       expect(container.firstChild).to.have.class(classes.docked);
     });
 
-    it('should render Slide > Paper inside the div', () => {
+    it('should render Slide > Paper inside the div', async () => {
       const transitionDuration = 123;
       const handleEntered = spy();
       const { container, setProps } = render(
@@ -238,7 +265,9 @@ describe('<Drawer />', () => {
 
       expect(handleEntered.callCount).to.equal(0);
 
-      clock.tick(transitionDuration);
+      await act(async () => {
+        await timer?.tickAsync(transitionDuration);
+      });
 
       expect(handleEntered.callCount).to.equal(1);
       expect(container.firstChild.firstChild).to.have.class(classes.paper);
diff --git a/packages/mui-material/src/Fade/Fade.test.js b/packages/mui-material/src/Fade/Fade.test.js
index c1528e96ac93e3..3ddbecf672b70a 100644
--- a/packages/mui-material/src/Fade/Fade.test.js
+++ b/packages/mui-material/src/Fade/Fade.test.js
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createRenderer } from '@mui/internal-test-utils';
+import { spy, useFakeTimers } from 'sinon';
+import { createRenderer, act } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import Fade from '@mui/material/Fade';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Fade />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   const defaultProps = {
     in: true,
@@ -30,9 +30,30 @@ describe('<Fade />', () => {
   }));
 
   describe('transition lifecycle', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
-    it('calls the appropriate callbacks for each transition', () => {
+    it('calls the appropriate callbacks for each transition', async () => {
       const handleEnter = spy();
       const handleEntering = spy();
       const handleEntered = spy();
@@ -65,7 +86,9 @@ describe('<Fade />', () => {
       expect(handleEntering.callCount).to.equal(1);
       expect(handleEntering.args[0][0]).to.equal(child);
 
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
 
       expect(handleEntered.callCount).to.equal(1);
       expect(handleEntered.args[0][0]).to.equal(child);
@@ -82,7 +105,9 @@ describe('<Fade />', () => {
       expect(handleExiting.callCount).to.equal(1);
       expect(handleExiting.args[0][0]).to.equal(child);
 
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
 
       expect(handleExited.callCount).to.equal(1);
       expect(handleExited.args[0][0]).to.equal(child);
diff --git a/packages/mui-material/src/FormControl/FormControl.test.js b/packages/mui-material/src/FormControl/FormControl.test.js
index 430efdedaff13b..19948e1a0bfe95 100644
--- a/packages/mui-material/src/FormControl/FormControl.test.js
+++ b/packages/mui-material/src/FormControl/FormControl.test.js
@@ -84,7 +84,7 @@ describe('<FormControl />', () => {
   });
 
   describe('prop: disabled', () => {
-    it('will be unfocused if it gets disabled', () => {
+    it('will be unfocused if it gets disabled', async () => {
       const readContext = spy();
       const { container, setProps } = render(
         <FormControl>
@@ -94,7 +94,7 @@ describe('<FormControl />', () => {
       );
       expect(readContext.args[0][0]).to.have.property('focused', false);
 
-      act(() => {
+      await act(async () => {
         container.querySelector('input').focus();
       });
       expect(readContext.lastCall.args[0]).to.have.property('focused', true);
@@ -271,19 +271,19 @@ describe('<FormControl />', () => {
 
     describe('callbacks', () => {
       describe('onFilled', () => {
-        it('should set the filled state', () => {
+        it('should set the filled state', async () => {
           const formControlRef = React.createRef();
           render(<FormControlled ref={formControlRef} />);
 
           expect(formControlRef.current).to.have.property('filled', false);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onFilled();
           });
 
           expect(formControlRef.current).to.have.property('filled', true);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onFilled();
           });
 
@@ -292,23 +292,23 @@ describe('<FormControl />', () => {
       });
 
       describe('onEmpty', () => {
-        it('should clean the filled state', () => {
+        it('should clean the filled state', async () => {
           const formControlRef = React.createRef();
           render(<FormControlled ref={formControlRef} />);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onFilled();
           });
 
           expect(formControlRef.current).to.have.property('filled', true);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onEmpty();
           });
 
           expect(formControlRef.current).to.have.property('filled', false);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onEmpty();
           });
 
@@ -317,18 +317,18 @@ describe('<FormControl />', () => {
       });
 
       describe('handleFocus', () => {
-        it('should set the focused state', () => {
+        it('should set the focused state', async () => {
           const formControlRef = React.createRef();
           render(<FormControlled ref={formControlRef} />);
           expect(formControlRef.current).to.have.property('focused', false);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onFocus();
           });
 
           expect(formControlRef.current).to.have.property('focused', true);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onFocus();
           });
 
@@ -337,24 +337,24 @@ describe('<FormControl />', () => {
       });
 
       describe('handleBlur', () => {
-        it('should clear the focused state', () => {
+        it('should clear the focused state', async () => {
           const formControlRef = React.createRef();
           render(<FormControlled ref={formControlRef} />);
           expect(formControlRef.current).to.have.property('focused', false);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onFocus();
           });
 
           expect(formControlRef.current).to.have.property('focused', true);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onBlur();
           });
 
           expect(formControlRef.current).to.have.property('focused', false);
 
-          act(() => {
+          await act(async () => {
             formControlRef.current.onBlur();
           });
 
diff --git a/packages/mui-material/src/FormLabel/FormLabel.test.js b/packages/mui-material/src/FormLabel/FormLabel.test.js
index bc4e0a7a553747..5f2a5c48b8e3db 100644
--- a/packages/mui-material/src/FormLabel/FormLabel.test.js
+++ b/packages/mui-material/src/FormLabel/FormLabel.test.js
@@ -86,7 +86,7 @@ describe('<FormLabel />', () => {
         return null;
       });
 
-      it(`should have the focused class`, () => {
+      it(`should have the focused class`, async () => {
         const formControlRef = React.createRef();
         const { container } = render(
           <FormControl error>
@@ -97,13 +97,13 @@ describe('<FormLabel />', () => {
 
         expect(container.querySelector('label')).not.to.have.class(classes.focused);
 
-        act(() => {
+        await act(async () => {
           formControlRef.current.onFocus();
         });
         expect(container.querySelector('label')).to.have.class(classes.focused);
       });
 
-      it('should be overridden by props', () => {
+      it('should be overridden by props', async () => {
         const formControlRef = React.createRef();
         function Wrapper({ children }) {
           return (
@@ -117,7 +117,7 @@ describe('<FormLabel />', () => {
         const { container, setProps } = render(<FormLabel data-testid="FormLabel" />, {
           wrapper: Wrapper,
         });
-        act(() => {
+        await act(async () => {
           formControlRef.current.onFocus();
         });
 
diff --git a/packages/mui-material/src/Grow/Grow.test.js b/packages/mui-material/src/Grow/Grow.test.js
index ee77c0859d4887..af8f845b038fcf 100644
--- a/packages/mui-material/src/Grow/Grow.test.js
+++ b/packages/mui-material/src/Grow/Grow.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createRenderer } from '@mui/internal-test-utils';
+import { spy, useFakeTimers } from 'sinon';
+import { createRenderer, act } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Grow from '@mui/material/Grow';
@@ -9,7 +9,7 @@ import useForkRef from '../utils/useForkRef';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Grow />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   const defaultProps = {
     in: true,
@@ -36,9 +36,30 @@ describe('<Grow />', () => {
   );
 
   describe('calls the appropriate callbacks for each transition', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
-    it('calls the appropriate callbacks for each transition', () => {
+    it('calls the appropriate callbacks for each transition', async () => {
       const handleAddEndListener = spy();
       const handleEnter = spy();
       const handleEntering = spy();
@@ -78,7 +99,9 @@ describe('<Grow />', () => {
       expect(handleEntering.callCount).to.equal(1);
       expect(handleEntering.args[0][0]).to.equal(child);
 
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
 
       expect(handleEntered.callCount).to.equal(1);
       expect(handleEntered.args[0][0]).to.equal(child);
@@ -100,7 +123,9 @@ describe('<Grow />', () => {
       expect(handleExiting.callCount).to.equal(1);
       expect(handleExiting.args[0][0]).to.equal(child);
 
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
 
       expect(handleExited.callCount).to.equal(1);
       expect(handleExited.args[0][0]).to.equal(child);
@@ -110,7 +135,28 @@ describe('<Grow />', () => {
   describe('prop: timeout', () => {
     const enterDuration = 556;
     const leaveDuration = 446;
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
     describe('onEnter', () => {
       it('should create proper easeOut animation', () => {
@@ -129,7 +175,7 @@ describe('<Grow />', () => {
         expect(handleEnter.args[0][0].style.transition).to.match(new RegExp(`${enterDuration}ms`));
       });
 
-      it('should delay based on height when timeout is auto', () => {
+      it('should delay based on height when timeout is auto', async () => {
         const handleEntered = spy();
         const theme = createTheme({
           transitions: {
@@ -176,11 +222,15 @@ describe('<Grow />', () => {
 
         expect(handleEntered.callCount).to.equal(0);
 
-        clock.tick(0);
+        await act(async () => {
+          await timer?.tickAsync(0);
+        });
 
         expect(handleEntered.callCount).to.equal(0);
 
-        clock.tick(autoTransitionDuration);
+        await act(async () => {
+          await timer?.tickAsync(autoTransitionDuration);
+        });
 
         expect(handleEntered.callCount).to.equal(1);
 
@@ -193,12 +243,14 @@ describe('<Grow />', () => {
 
         expect(handleEntered2.callCount).to.equal(0);
 
-        clock.tick(0);
+        await act(async () => {
+          await timer?.tickAsync(0);
+        });
 
         expect(handleEntered2.callCount).to.equal(1);
       });
 
-      it('should use timeout as delay when timeout is number', () => {
+      it('should use timeout as delay when timeout is number', async () => {
         const timeout = 10;
         const handleEntered = spy();
 
@@ -206,18 +258,22 @@ describe('<Grow />', () => {
 
         expect(handleEntered.callCount).to.equal(0);
 
-        clock.tick(0);
+        await act(async () => {
+          await timer?.tickAsync(0);
+        });
 
         expect(handleEntered.callCount).to.equal(0);
 
-        clock.tick(timeout);
+        await act(async () => {
+          await timer?.tickAsync(timeout);
+        });
 
         expect(handleEntered.callCount).to.equal(1);
       });
     });
 
     describe('onExit', () => {
-      it('should delay based on height when timeout is auto', () => {
+      it('should delay based on height when timeout is auto', async () => {
         const handleExited = spy();
         const { setProps } = render(
           <Grow in timeout="auto" onExited={handleExited}>
@@ -225,35 +281,49 @@ describe('<Grow />', () => {
           </Grow>,
         );
 
-        clock.tick(0);
+        await act(async () => {
+          await timer?.tickAsync(0);
+        });
 
         setProps({
           in: false,
         });
 
         expect(handleExited.callCount).to.equal(0);
-        clock.tick(0);
+
+        await act(async () => {
+          await timer?.tickAsync(0);
+        });
 
         expect(handleExited.callCount).to.equal(1);
       });
 
-      it('should use timeout as delay when timeout is number', () => {
+      it('should use timeout as delay when timeout is number', async () => {
         const timeout = 20;
         const handleExited = spy();
         const { setProps } = render(
           <Grow {...defaultProps} timeout={timeout} onExited={handleExited} />,
         );
 
-        clock.tick(timeout);
+        await act(async () => {
+          await timer?.tickAsync(timeout);
+        });
+
         setProps({
           in: false,
         });
 
         expect(handleExited.callCount).to.equal(0);
-        clock.tick(0);
+
+        await act(async () => {
+          await timer?.tickAsync(0);
+        });
 
         expect(handleExited.callCount).to.equal(0);
-        clock.tick(timeout);
+
+        await act(async () => {
+          await timer?.tickAsync(timeout);
+        });
 
         expect(handleExited.callCount).to.equal(1);
       });
diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js
index fa6207bcf3fa52..58f9f3925b7414 100644
--- a/packages/mui-material/src/InputBase/InputBase.test.js
+++ b/packages/mui-material/src/InputBase/InputBase.test.js
@@ -72,10 +72,10 @@ describe('<InputBase />', () => {
       expect(textarea).to.have.value('Hello');
     });
 
-    it('should preserve state when changing rows', () => {
+    it('should preserve state when changing rows', async () => {
       const { setProps } = render(<InputBase multiline />);
       const textarea = screen.getByRole('textbox', { hidden: false });
-      act(() => {
+      await act(async () => {
         textarea.focus();
       });
 
@@ -93,14 +93,14 @@ describe('<InputBase />', () => {
       expect(input).to.have.class(classes.disabled);
     });
 
-    it('should reset the focused state if getting disabled', () => {
+    it('should reset the focused state if getting disabled', async () => {
       const handleBlur = spy();
       const handleFocus = spy();
       const { container, setProps } = render(
         <InputBase onBlur={handleBlur} onFocus={handleFocus} />,
       );
 
-      act(() => {
+      await act(async () => {
         container.querySelector('input').focus();
       });
       expect(handleFocus.callCount).to.equal(1);
@@ -130,7 +130,7 @@ describe('<InputBase />', () => {
     });
   });
 
-  it('should fire event callbacks', () => {
+  it('should fire event callbacks', async () => {
     const handleChange = spy();
     const handleFocus = spy();
     const handleBlur = spy();
@@ -149,7 +149,7 @@ describe('<InputBase />', () => {
 
     // simulating user input: gain focus, key input (keydown, (input), change, keyup), blur
 
-    act(() => {
+    await act(async () => {
       input.focus();
     });
     expect(handleFocus.callCount).to.equal(1);
@@ -163,7 +163,7 @@ describe('<InputBase />', () => {
     fireEvent.keyUp(input, { key: 'a' });
     expect(handleKeyUp.callCount).to.equal(1);
 
-    act(() => {
+    await act(async () => {
       input.blur();
     });
     expect(handleBlur.callCount).to.equal(1);
@@ -391,7 +391,7 @@ describe('<InputBase />', () => {
     });
 
     describe('focused', () => {
-      it('prioritizes context focus', () => {
+      it('prioritizes context focus', async () => {
         const FormController = React.forwardRef((props, ref) => {
           const { onBlur, onFocus } = useFormControl();
 
@@ -407,25 +407,25 @@ describe('<InputBase />', () => {
           </FormControl>,
         );
 
-        act(() => {
+        await act(async () => {
           getByRole('textbox').focus();
         });
         expect(getByTestId('root')).to.have.class(classes.focused);
 
-        act(() => {
+        await act(async () => {
           controlRef.current.onBlur();
         });
 
         expect(getByTestId('root')).not.to.have.class(classes.focused);
 
-        act(() => {
+        await act(async () => {
           controlRef.current.onFocus();
         });
 
         expect(getByTestId('root')).to.have.class(classes.focused);
       });
 
-      it('propagates focused state', () => {
+      it('propagates focused state', async () => {
         function FocusedStateLabel(props) {
           const { focused } = useFormControl();
           return <label {...props}>focused: {String(focused)}</label>;
@@ -438,12 +438,12 @@ describe('<InputBase />', () => {
         );
         expect(getByTestId('label')).to.have.text('focused: false');
 
-        act(() => {
+        await act(async () => {
           getByRole('textbox').focus();
         });
         expect(getByTestId('label')).to.have.text('focused: true');
 
-        act(() => {
+        await act(async () => {
           getByRole('textbox').blur();
         });
         expect(getByTestId('label')).to.have.text('focused: false');
diff --git a/packages/mui-material/src/InputLabel/InputLabel.test.js b/packages/mui-material/src/InputLabel/InputLabel.test.js
index e12c475ceb84ec..6ea17d80df488e 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.test.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.test.js
@@ -94,7 +94,7 @@ describe('<InputLabel />', () => {
     });
 
     describe('focused', () => {
-      it('applies a shrink class that can be controlled by props', () => {
+      it('applies a shrink class that can be controlled by props', async () => {
         function Wrapper({ children }) {
           return (
             <FormControl>
@@ -108,7 +108,7 @@ describe('<InputLabel />', () => {
         const { container, getByTestId, setProps } = render(<InputLabel data-testid="root" />, {
           wrapper: Wrapper,
         });
-        act(() => {
+        await act(async () => {
           container.querySelector('input').focus();
         });
 
diff --git a/packages/mui-material/src/Link/Link.test.js b/packages/mui-material/src/Link/Link.test.js
index a10a71adf79463..ee26d0f2669c71 100644
--- a/packages/mui-material/src/Link/Link.test.js
+++ b/packages/mui-material/src/Link/Link.test.js
@@ -6,8 +6,8 @@ import Link, { linkClasses as classes } from '@mui/material/Link';
 import Typography, { typographyClasses } from '@mui/material/Typography';
 import describeConformance from '../../test/describeConformance';
 
-function focusVisible(element) {
-  act(() => {
+async function focusVisible(element) {
+  await act(async () => {
     element.blur();
     document.dispatchEvent(new window.Event('keydown'));
     element.focus();
@@ -79,7 +79,7 @@ describe('<Link />', () => {
   });
 
   describe('keyboard focus', () => {
-    it('should add the focusVisible class when focused', function test() {
+    it('should add the focusVisible class when focused', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // JSDOM doesn't support :focus-visible
         this.skip();
@@ -90,11 +90,11 @@ describe('<Link />', () => {
 
       expect(anchor).not.to.have.class(classes.focusVisible);
 
-      focusVisible(anchor);
+      await focusVisible(anchor);
 
       expect(anchor).to.have.class(classes.focusVisible);
 
-      act(() => {
+      await act(async () => {
         anchor.blur();
       });
 
diff --git a/packages/mui-material/src/Menu/Menu.test.js b/packages/mui-material/src/Menu/Menu.test.js
index b9e04e603aeaf2..98a464576cb030 100644
--- a/packages/mui-material/src/Menu/Menu.test.js
+++ b/packages/mui-material/src/Menu/Menu.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import { expect } from 'chai';
 import {
   createRenderer,
@@ -23,7 +23,32 @@ const CustomTransition = React.forwardRef(function CustomTransition(
 });
 
 describe('<Menu />', () => {
-  const { render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    // Handles the warning about an update to a component that is not wrapped in act
+    // by preventing setTimeout to run
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(async () => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   describeConformance(<Menu anchorEl={() => document.createElement('div')} open />, () => ({
     classes,
diff --git a/packages/mui-material/src/Modal/Modal.test.js b/packages/mui-material/src/Modal/Modal.test.js
index e061709dfab229..386af174e56b68 100644
--- a/packages/mui-material/src/Modal/Modal.test.js
+++ b/packages/mui-material/src/Modal/Modal.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import PropTypes from 'prop-types';
 import { act, createRenderer, fireEvent, within, screen } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -10,7 +10,7 @@ import Modal, { modalClasses as classes } from '@mui/material/Modal';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Modal />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   let savedBodyStyle;
 
@@ -249,14 +249,14 @@ describe('<Modal />', () => {
   });
 
   describe('event: keydown', () => {
-    it('when mounted, TopModal and event not esc should not call given functions', () => {
+    it('when mounted, TopModal and event not esc should not call given functions', async () => {
       const onCloseSpy = spy();
       const { getByTestId } = render(
         <Modal open onClose={onCloseSpy}>
           <div data-testid="modal" tabIndex={-1} />
         </Modal>,
       );
-      act(() => {
+      await act(async () => {
         getByTestId('modal').focus();
       });
 
@@ -267,7 +267,7 @@ describe('<Modal />', () => {
       expect(onCloseSpy).to.have.property('callCount', 0);
     });
 
-    it('should call onClose when Esc is pressed and stop event propagation', () => {
+    it('should call onClose when Esc is pressed and stop event propagation', async () => {
       const handleKeyDown = spy();
       const onCloseSpy = spy();
       const { getByTestId } = render(
@@ -277,7 +277,7 @@ describe('<Modal />', () => {
           </Modal>
         </div>,
       );
-      act(() => {
+      await act(async () => {
         getByTestId('modal').focus();
       });
 
@@ -289,7 +289,7 @@ describe('<Modal />', () => {
       expect(handleKeyDown).to.have.property('callCount', 0);
     });
 
-    it('should not call onClose when `disableEscapeKeyDown={true}`', () => {
+    it('should not call onClose when `disableEscapeKeyDown={true}`', async () => {
       const handleKeyDown = spy();
       const onCloseSpy = spy();
       const { getByTestId } = render(
@@ -299,7 +299,7 @@ describe('<Modal />', () => {
           </Modal>
         </div>,
       );
-      act(() => {
+      await act(async () => {
         getByTestId('modal').focus();
       });
 
@@ -355,7 +355,7 @@ describe('<Modal />', () => {
     // Test case for https://github.com/mui/material-ui/issues/15180
     // TODO: how does this relate to `keepMounted`
     // TODO: never finishes
-    it('should remove the transition children in the DOM when closed whilst transition status is entering', () => {
+    it('should remove the transition children in the DOM when closed whilst transition status is entering', async () => {
       class OpenClose extends React.Component {
         state = {
           open: false,
@@ -387,7 +387,7 @@ describe('<Modal />', () => {
       const { queryByTestId, getByRole } = render(<OpenClose />);
       expect(queryByTestId('children')).to.equal(null);
 
-      act(() => {
+      await act(async () => {
         getByRole('button').click();
       });
 
@@ -398,11 +398,11 @@ describe('<Modal />', () => {
   describe('focus', () => {
     let initialFocus = null;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       initialFocus = document.createElement('button');
       initialFocus.tabIndex = 0;
       document.body.appendChild(initialFocus);
-      act(() => {
+      await act(async () => {
         initialFocus.focus();
       });
     });
@@ -433,7 +433,7 @@ describe('<Modal />', () => {
           </div>
         </Modal>,
         // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076
-        { strictEffects: false },
+        { strict: false, strictEffects: false },
       );
 
       expect(getByTestId('auto-focus')).toHaveFocus();
@@ -468,9 +468,30 @@ describe('<Modal />', () => {
     });
 
     describe('focus stealing', () => {
-      clock.withFakeTimers();
+      /** @type {import('sinon').SinonFakeTimers | null} */
+      let timer = null;
+
+      beforeEach(() => {
+        timer = useFakeTimers({
+          shouldClearNativeTimers: true,
+          toFake: [
+            'performance',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'Date',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+          ],
+        });
+      });
+
+      afterEach(() => {
+        timer?.restore();
+      });
 
-      it('does not steal focus from other frames', function test() {
+      it('does not steal focus from other frames', async function test() {
         if (/jsdom/.test(window.navigator.userAgent)) {
           // TODO: Unclear why this fails. Not important
           // since a browser test gives us more confidence anyway
@@ -524,18 +545,41 @@ describe('<Modal />', () => {
           </React.Fragment>,
         );
 
-        act(() => {
+        await act(async () => {
           getByTestId('foreign-input').focus();
         });
         // wait for the `contain` interval check to kick in.
-        clock.tick(500);
+        await act(async () => {
+          await timer?.tickAsync(500);
+        });
 
         expect(getByTestId('foreign-input')).toHaveFocus();
       });
     });
 
     describe('when starting open and closing immediately', () => {
-      clock.withFakeTimers();
+      /** @type {import('sinon').SinonFakeTimers | null} */
+      let timer = null;
+
+      beforeEach(() => {
+        timer = useFakeTimers({
+          shouldClearNativeTimers: true,
+          toFake: [
+            'performance',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'Date',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+          ],
+        });
+      });
+
+      afterEach(() => {
+        timer?.restore();
+      });
 
       // Test case for https://github.com/mui/material-ui/issues/12831
       it('should unmount the children ', () => {
@@ -561,7 +605,28 @@ describe('<Modal />', () => {
   });
 
   describe('two modal at the same time', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
     it('should open and close', () => {
       function TestCase(props) {
@@ -593,7 +658,7 @@ describe('<Modal />', () => {
       expect(document.body.style).to.have.property('overflow', '');
     });
 
-    it('should open and close with Transitions', () => {
+    it('should open and close with Transitions', async () => {
       function TestCase(props) {
         return (
           <React.Fragment>
@@ -618,14 +683,20 @@ describe('<Modal />', () => {
       expect(document.body.style).to.have.property('overflow', '');
 
       setProps({ open: true });
-      clock.runToLast();
+
+      await act(async () => {
+        await timer?.runToLastAsync();
+      });
 
       expect(handleEntered.callCount).to.equal(1);
       expect(handleExited.callCount).to.equal(0);
       expect(document.body.style).to.have.property('overflow', 'hidden');
 
       setProps({ open: false });
-      clock.runToLast();
+
+      await act(async () => {
+        await timer?.runToLastAsync();
+      });
 
       expect(handleEntered.callCount).to.equal(1);
       expect(handleExited.callCount).to.equal(1);
@@ -657,9 +728,30 @@ describe('<Modal />', () => {
   });
 
   describe('prop: closeAfterTransition', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
 
-    it('when true it should close after Transition has finished', () => {
+    afterEach(() => {
+      timer?.restore();
+    });
+
+    it('when true it should close after Transition has finished', async () => {
       function TestCase(props) {
         return (
           <Modal open={props.open} closeAfterTransition>
@@ -693,7 +785,10 @@ describe('<Modal />', () => {
       expect(document.body.style).to.have.property('overflow', '');
 
       setProps({ open: true });
-      clock.runToLast();
+
+      await act(async () => {
+        await timer?.runToLastAsync();
+      });
 
       expect(handleEntered.callCount).to.equal(1);
       expect(handleExiting.callCount).to.equal(0);
@@ -707,8 +802,8 @@ describe('<Modal />', () => {
       expect(handleExited.callCount).to.equal(0);
       expect(document.body.style).to.have.property('overflow', 'hidden');
 
-      act(() => {
-        clock.runToLast();
+      await act(async () => {
+        await timer?.runToLastAsync();
       });
 
       expect(handleEntered.callCount).to.equal(1);
@@ -717,7 +812,7 @@ describe('<Modal />', () => {
       expect(document.body.style).to.have.property('overflow', '');
     });
 
-    it('when false it should close before Transition has finished', () => {
+    it('when false it should close before Transition has finished', async () => {
       function TestCase(props) {
         return (
           <Modal open={props.open} closeAfterTransition={false}>
@@ -751,7 +846,10 @@ describe('<Modal />', () => {
       expect(document.body.style).to.have.property('overflow', '');
 
       setProps({ open: true });
-      clock.runToLast();
+
+      await act(async () => {
+        await timer?.runToLastAsync();
+      });
 
       expect(handleEntered.callCount).to.equal(1);
       expect(handleExiting.callCount).to.equal(0);
@@ -765,7 +863,9 @@ describe('<Modal />', () => {
       expect(handleExited.callCount).to.equal(0);
       expect(document.body.style).to.have.property('overflow', '');
 
-      clock.runToLast();
+      await act(async () => {
+        await timer?.runToLastAsync();
+      });
 
       expect(handleEntered.callCount).to.equal(1);
       expect(handleExiting.callCount).to.equal(1);
diff --git a/packages/mui-material/src/Popover/Popover.test.js b/packages/mui-material/src/Popover/Popover.test.js
index 9b2a94259d3125..e21d466bc84194 100644
--- a/packages/mui-material/src/Popover/Popover.test.js
+++ b/packages/mui-material/src/Popover/Popover.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy, stub, match } from 'sinon';
+import { spy, stub, match, useFakeTimers } from 'sinon';
 import { act, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
 import PropTypes from 'prop-types';
 import Modal, { modalClasses } from '@mui/material/Modal';
@@ -50,7 +50,30 @@ const CustomTransition = React.forwardRef(function CustomTransition(
 });
 
 describe('<Popover />', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   describeConformance(<Popover anchorEl={() => document.createElement('div')} open />, () => ({
     classes,
@@ -92,7 +115,7 @@ describe('<Popover />', () => {
   }));
 
   describe('root node', () => {
-    it('should render a Modal with an invisible backdrop as the root node', () => {
+    it('should render a Modal with an invisible backdrop as the root node', async () => {
       function TestBackdrop(props) {
         const { open, invisible } = props;
         if (!open) {
@@ -133,7 +156,7 @@ describe('<Popover />', () => {
       expect(screen.getByTestId('children')).not.to.equal(null);
     });
 
-    it('hide its children immediately when closing but transition them out', () => {
+    it('hide its children immediately when closing but transition them out', async () => {
       const { setProps } = render(
         <Popover open anchorEl={document.createElement('div')} transitionDuration={1974}>
           <div data-testid="children" />
@@ -144,7 +167,9 @@ describe('<Popover />', () => {
 
       expect(screen.getByTestId('children')).toBeInaccessible();
 
-      clock.tick(1974);
+      await act(async () => {
+        await timer?.tickAsync(1974);
+      });
 
       expect(screen.queryByTestId('children')).to.equal(null);
     });
@@ -227,7 +252,7 @@ describe('<Popover />', () => {
       );
     });
 
-    it('should fire Popover transition event callbacks', () => {
+    it('should fire Popover transition event callbacks', async () => {
       const handleEnter = spy();
       const handleEntering = spy();
       const handleEntered = spy();
@@ -270,7 +295,9 @@ describe('<Popover />', () => {
         onExited: 0,
       });
 
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
 
       expect({
         onEnter: handleEnter.callCount,
@@ -308,7 +335,9 @@ describe('<Popover />', () => {
         onExited: 0,
       });
 
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
 
       expect({
         onEnter: handleEnter.callCount,
@@ -498,7 +527,7 @@ describe('<Popover />', () => {
   describe('positioning on an anchor', () => {
     let anchorEl;
 
-    function openPopover(anchorOrigin) {
+    async function openPopover(anchorOrigin) {
       render(
         <Popover
           anchorEl={anchorEl}
@@ -510,7 +539,9 @@ describe('<Popover />', () => {
           <div />
         </Popover>,
       );
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
     }
 
     beforeEach(() => {
@@ -529,8 +560,8 @@ describe('<Popover />', () => {
       document.body.removeChild(anchorEl);
     });
 
-    it('should be positioned over the top left of the anchor', () => {
-      openPopover({ vertical: 'top', horizontal: 'left' });
+    it('should be positioned over the top left of the anchor', async () => {
+      await openPopover({ vertical: 'top', horizontal: 'left' });
 
       const anchorRect = anchorEl.getBoundingClientRect();
       const top = anchorRect.top <= 16 ? 16 : anchorRect.top;
@@ -538,8 +569,8 @@ describe('<Popover />', () => {
       expect(screen.getByTestId('paper')).toHaveInlineStyle({ top: `${top}px`, left: `${left}px` });
     });
 
-    it('should be positioned over the center left of the anchor', () => {
-      openPopover({ vertical: 'center', horizontal: 'left' });
+    it('should be positioned over the center left of the anchor', async () => {
+      await openPopover({ vertical: 'center', horizontal: 'left' });
 
       const anchorRect = anchorEl.getBoundingClientRect();
       const anchorTop = anchorRect.top + anchorRect.height / 2;
@@ -548,8 +579,8 @@ describe('<Popover />', () => {
       expect(screen.getByTestId('paper')).toHaveInlineStyle({ top: `${top}px`, left: `${left}px` });
     });
 
-    it('should be positioned over the bottom left of the anchor', () => {
-      openPopover({ vertical: 'bottom', horizontal: 'left' });
+    it('should be positioned over the bottom left of the anchor', async () => {
+      await openPopover({ vertical: 'bottom', horizontal: 'left' });
 
       const anchorRect = anchorEl.getBoundingClientRect();
       const top = anchorRect.bottom <= 16 ? 16 : anchorRect.bottom;
@@ -557,8 +588,8 @@ describe('<Popover />', () => {
       expect(screen.getByTestId('paper')).toHaveInlineStyle({ top: `${top}px`, left: `${left}px` });
     });
 
-    it('should be positioned over the center center of the anchor', () => {
-      openPopover({ vertical: 'center', horizontal: 'center' });
+    it('should be positioned over the center center of the anchor', async () => {
+      await openPopover({ vertical: 'center', horizontal: 'center' });
 
       const anchorRect = anchorEl.getBoundingClientRect();
       const anchorTop = anchorRect.top + anchorRect.height / 2;
@@ -568,16 +599,16 @@ describe('<Popover />', () => {
       expect(screen.getByTestId('paper')).toHaveInlineStyle({ top: `${top}px`, left: `${left}px` });
     });
 
-    it('should be positioned over the top right of the anchor', () => {
-      openPopover({ vertical: 'top', horizontal: 'right' });
+    it('should be positioned over the top right of the anchor', async () => {
+      await openPopover({ vertical: 'top', horizontal: 'right' });
       const anchorRect = anchorEl.getBoundingClientRect();
       const top = anchorRect.top <= 16 ? 16 : anchorRect.top;
       const left = anchorRect.right <= 16 ? 16 : anchorRect.right;
       expect(screen.getByTestId('paper')).toHaveInlineStyle({ top: `${top}px`, left: `${left}px` });
     });
 
-    it('should be positioned over the bottom right of the anchor', () => {
-      openPopover({ vertical: 'bottom', horizontal: 'right' });
+    it('should be positioned over the bottom right of the anchor', async () => {
+      await openPopover({ vertical: 'bottom', horizontal: 'right' });
 
       const anchorRect = anchorEl.getBoundingClientRect();
       const top = anchorRect.bottom <= 16 ? 16 : anchorRect.bottom;
@@ -639,7 +670,7 @@ describe('<Popover />', () => {
   describe('prop anchorReference="anchorPosition"', () => {
     const anchorPosition = { top: 300, left: 500 };
 
-    function openPopover(anchorOrigin) {
+    async function openPopover(anchorOrigin) {
       render(
         <Popover
           anchorEl={document.createElement('div')}
@@ -653,11 +684,13 @@ describe('<Popover />', () => {
           <div />
         </Popover>,
       );
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
     }
 
-    it('should be positioned according to the passed coordinates', () => {
-      openPopover();
+    it('should be positioned according to the passed coordinates', async () => {
+      await openPopover();
 
       expect(screen.getByTestId('paper')).toHaveInlineStyle({
         top: `${anchorPosition.top}px`,
@@ -665,8 +698,8 @@ describe('<Popover />', () => {
       });
     });
 
-    it('should ignore the anchorOrigin prop when being positioned', () => {
-      openPopover({ vertical: 'top', horizontal: 'right' });
+    it('should ignore the anchorOrigin prop when being positioned', async () => {
+      await openPopover({ vertical: 'top', horizontal: 'right' });
 
       expect(screen.getByTestId('paper')).toHaveInlineStyle({
         top: `${anchorPosition.top}px`,
@@ -676,7 +709,7 @@ describe('<Popover />', () => {
   });
 
   describe('prop anchorReference="none"', () => {
-    it('should not try to change the position', () => {
+    it('should not try to change the position', async () => {
       const anchorEl = document.createElement('div');
       render(
         <Popover
@@ -715,7 +748,7 @@ describe('<Popover />', () => {
       window.innerHeight = windowInnerHeight;
     });
 
-    it('should recalculate position if the popover is open', () => {
+    it('should recalculate position if the popover is open', async () => {
       let element;
       const anchorEl = document.createElement('div');
       stub(anchorEl, 'getBoundingClientRect').callsFake(() => ({
@@ -745,7 +778,9 @@ describe('<Popover />', () => {
 
       window.innerHeight = windowInnerHeight * 2;
       window.dispatchEvent(new window.Event('resize'));
-      clock.tick(166);
+      await act(async () => {
+        await timer?.tickAsync(166);
+      });
 
       const afterStyle = {
         top: element.style.top,
@@ -755,7 +790,7 @@ describe('<Popover />', () => {
       expect(beforeStyle).not.to.deep.equal(afterStyle);
     });
 
-    it('should not recalculate position if the popover is closed', () => {
+    it('should not recalculate position if the popover is closed', async () => {
       let element;
       const mockedAnchor = document.createElement('div');
       stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
@@ -786,7 +821,9 @@ describe('<Popover />', () => {
       window.innerHeight = windowInnerHeight * 2;
       window.dispatchEvent(new window.Event('resize'));
       setProps({ open: false });
-      clock.tick(166);
+      await act(async () => {
+        await timer?.tickAsync(166);
+      });
 
       const afterStyle = {
         top: element.style.top,
@@ -796,7 +833,7 @@ describe('<Popover />', () => {
       expect(beforeStyle).to.deep.equal(afterStyle);
     });
 
-    it('should be able to manually recalculate position', () => {
+    it('should be able to manually recalculate position', async () => {
       let element;
       const mockedAnchor = document.createElement('div');
       stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
@@ -833,10 +870,12 @@ describe('<Popover />', () => {
 
       expect(typeof popoverActions.updatePosition === 'function').to.equal(true);
 
-      act(() => {
+      await act(async () => {
         popoverActions.updatePosition();
       });
-      clock.tick(166);
+      await act(async () => {
+        await timer?.tickAsync(166);
+      });
 
       const afterStyle = {
         top: element.style.top,
diff --git a/packages/mui-material/src/Popper/Popper.test.js b/packages/mui-material/src/Popper/Popper.test.js
index 9c6c0c11b9c1f0..3a174a6db8fc1c 100644
--- a/packages/mui-material/src/Popper/Popper.test.js
+++ b/packages/mui-material/src/Popper/Popper.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils';
+import { useFakeTimers } from 'sinon';
 import { ThemeProvider } from '@mui/system';
 import createTheme from '@mui/system/createTheme';
 import Grow from '@mui/material/Grow';
@@ -9,7 +10,31 @@ import describeConformance from '../../test/describeConformance';
 
 describe('<Popper />', () => {
   let rtlTheme;
-  const { clock, render } = createRenderer({ clock: 'fake' });
+
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
   const defaultProps = {
     anchorEl: () => document.createElement('svg'),
     children: <span>Hello World</span>,
@@ -207,9 +232,7 @@ describe('<Popper />', () => {
   });
 
   describe('prop: transition', () => {
-    clock.withFakeTimers();
-
-    it('should work', () => {
+    it('should work', async () => {
       const { queryByRole, getByRole, setProps } = render(
         <Popper {...defaultProps} transition>
           {({ TransitionProps }) => (
@@ -223,7 +246,9 @@ describe('<Popper />', () => {
       expect(getByRole('tooltip')).to.have.text('Hello World');
 
       setProps({ anchorEl: null, open: false });
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
 
       expect(queryByRole('tooltip')).to.equal(null);
     });
@@ -266,9 +291,7 @@ describe('<Popper />', () => {
   });
 
   describe('display', () => {
-    clock.withFakeTimers();
-
-    it('should keep display:none when not toggled and transition/keepMounted/disablePortal props are set', () => {
+    it('should keep display:none when not toggled and transition/keepMounted/disablePortal props are set', async () => {
       const { getByRole, setProps } = render(
         <Popper {...defaultProps} open={false} keepMounted transition disablePortal>
           {({ TransitionProps }) => (
@@ -282,10 +305,14 @@ describe('<Popper />', () => {
       expect(getByRole('tooltip', { hidden: true }).style.display).to.equal('none');
 
       setProps({ open: true });
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
 
       setProps({ open: false });
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
       expect(getByRole('tooltip', { hidden: true }).style.display).to.equal('none');
     });
   });
diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.test.js b/packages/mui-material/src/RadioGroup/RadioGroup.test.js
index e9742f155920f3..980ba33190836b 100644
--- a/packages/mui-material/src/RadioGroup/RadioGroup.test.js
+++ b/packages/mui-material/src/RadioGroup/RadioGroup.test.js
@@ -40,12 +40,12 @@ describe('<RadioGroup />', () => {
     expect(handleBlur.callCount).to.equal(1);
   });
 
-  it('should fire the onKeyDown callback', () => {
+  it('should fire the onKeyDown callback', async () => {
     const handleKeyDown = spy();
     const { getByRole } = render(<RadioGroup tabIndex={-1} value="" onKeyDown={handleKeyDown} />);
     const radiogroup = getByRole('radiogroup');
 
-    act(() => {
+    await act(async () => {
       radiogroup.focus();
     });
 
@@ -139,7 +139,7 @@ describe('<RadioGroup />', () => {
       expect(oneRadioOnFocus.callCount).to.equal(1);
     });
 
-    it('should not focus any radios if all are disabled', () => {
+    it('should not focus any radios if all are disabled', async () => {
       const actionsRef = React.createRef();
       const zeroRadioOnFocus = spy();
       const oneRadioOnFocus = spy();
@@ -153,7 +153,7 @@ describe('<RadioGroup />', () => {
         </RadioGroup>,
       );
 
-      act(() => {
+      await act(async () => {
         actionsRef.current.focus();
       });
 
@@ -208,11 +208,11 @@ describe('<RadioGroup />', () => {
       expect(threeRadioOnFocus.callCount).to.equal(1);
     });
 
-    it('should be able to focus with no radios', () => {
+    it('should be able to focus with no radios', async () => {
       const actionsRef = React.createRef();
       render(<RadioGroup actions={actionsRef} value="" />);
 
-      act(() => {
+      await act(async () => {
         actionsRef.current.focus();
       });
     });
@@ -363,19 +363,19 @@ describe('<RadioGroup />', () => {
       });
 
       describe('onChange', () => {
-        it('should set the value state', () => {
+        it('should set the value state', async () => {
           const radioGroupRef = React.createRef();
           render(<RadioGroupControlled ref={radioGroupRef} defaultValue="zero" />);
 
           expect(radioGroupRef.current).to.have.property('value', 'zero');
 
-          act(() => {
+          await act(async () => {
             radioGroupRef.current.onChange({ target: { value: 'one' } });
           });
 
           expect(radioGroupRef.current).to.have.property('value', 'one');
 
-          act(() => {
+          await act(async () => {
             radioGroupRef.current.onChange({ target: { value: 'two' } });
           });
 
diff --git a/packages/mui-material/src/Rating/Rating.test.js b/packages/mui-material/src/Rating/Rating.test.js
index 3f9e315e63bc78..ee3b98e4eab17b 100644
--- a/packages/mui-material/src/Rating/Rating.test.js
+++ b/packages/mui-material/src/Rating/Rating.test.js
@@ -193,14 +193,14 @@ describe('<Rating />', () => {
     expect(checked.value).to.equal('2');
   });
 
-  it('has a customization point for the label of the empty value when it is active', () => {
+  it('has a customization point for the label of the empty value when it is active', async () => {
     const { container } = render(
       <Rating classes={{ labelEmptyValueActive: 'customized' }} name="" value={null} />,
     );
 
     expect(container.querySelector('.customized')).to.equal(null);
 
-    act(() => {
+    await act(async () => {
       const noValueRadio = screen.getAllByRole('radio').find((radio) => {
         return radio.checked;
       });
@@ -211,7 +211,7 @@ describe('<Rating />', () => {
     expect(container.querySelector('.customized')).to.have.tagName('label');
   });
 
-  it('should apply labelEmptyValueActive styles from theme', function test() {
+  it('should apply labelEmptyValueActive styles from theme', async function test() {
     if (/jsdom/.test(window.navigator.userAgent)) {
       this.skip();
     }
@@ -233,7 +233,7 @@ describe('<Rating />', () => {
       </ThemeProvider>,
     );
 
-    act(() => {
+    await act(async () => {
       const noValueRadio = screen.getAllByRole('radio').find((radio) => {
         return radio.checked;
       });
@@ -335,7 +335,7 @@ describe('<Rating />', () => {
         formData: [['rating', '']],
       },
     ].forEach((testData, testNumber) => {
-      it(`submits the expected form data #${testNumber + 1}`, () => {
+      it(`submits the expected form data #${testNumber + 1}`, async () => {
         /**
          * @type FormData
          */
@@ -354,7 +354,7 @@ describe('<Rating />', () => {
         );
         const submitter = document.querySelector('button[type="submit"]');
 
-        act(() => {
+        await act(async () => {
           // form.submit() would not run form validation
           submitter.click();
         });
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 4599548c848d92..5187ae465d7a0c 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy, stub } from 'sinon';
+import { spy, stub, useFakeTimers } from 'sinon';
 import {
   ErrorBoundary,
   act,
@@ -22,7 +22,30 @@ import { nativeSelectClasses } from '../NativeSelect';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Select />', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   describeConformance(<Select value="" />, () => ({
     classes,
@@ -838,7 +861,7 @@ describe('<Select />', () => {
   });
 
   describe('prop: MenuProps', () => {
-    it('should apply additional props to the Menu component', () => {
+    it('should apply additional props to the Menu component', async () => {
       const onEntered = spy();
       const { getByRole } = render(
         <Select MenuProps={{ TransitionProps: { onEntered }, transitionDuration: 100 }} value="10">
@@ -847,11 +870,15 @@ describe('<Select />', () => {
       );
 
       fireEvent.mouseDown(getByRole('combobox'));
-      clock.tick(99);
+      await act(async () => {
+        await timer?.tickAsync(99);
+      });
 
       expect(onEntered.callCount).to.equal(0);
 
-      clock.tick(1);
+      await act(async () => {
+        await timer?.tickAsync(1);
+      });
 
       expect(onEntered.callCount).to.equal(1);
     });
@@ -959,7 +986,7 @@ describe('<Select />', () => {
   });
 
   describe('prop: renderValue', () => {
-    it('should use the prop to render the value', () => {
+    it('should use the prop to render the value', async () => {
       const renderValue = (x) => `0b${x.toString(2)}`;
       const { getByRole } = render(
         <Select renderValue={renderValue} value={4}>
@@ -1037,7 +1064,9 @@ describe('<Select />', () => {
       // It's desired that this fails one day. The additional tick required to remove
       // this from the DOM is not a feature
       expect(getByRole('listbox', { hidden: true })).toBeInaccessible();
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
 
       expect(queryByRole('listbox', { hidden: true })).to.equal(null);
     });
diff --git a/packages/mui-material/src/Slide/Slide.test.js b/packages/mui-material/src/Slide/Slide.test.js
index 60013e630c0f55..818559485a8a7f 100644
--- a/packages/mui-material/src/Slide/Slide.test.js
+++ b/packages/mui-material/src/Slide/Slide.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy, stub } from 'sinon';
+import { spy, stub, useFakeTimers } from 'sinon';
 import { act, createRenderer } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -10,7 +10,7 @@ import { useForkRef } from '../utils';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Slide />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   const defaultProps = {
     in: true,
@@ -56,9 +56,30 @@ describe('<Slide />', () => {
   });
 
   describe('transition lifecycle', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
-    it('tests', () => {
+    it('tests', async () => {
       const handleAddEndListener = spy();
       const handleEnter = spy();
       const handleEntering = spy();
@@ -100,7 +121,9 @@ describe('<Slide />', () => {
       expect(handleEntering.callCount).to.equal(1);
       expect(handleEntering.args[0][0]).to.equal(child);
 
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
       expect(handleEntered.callCount).to.equal(1);
 
       setProps({ in: false });
@@ -111,7 +134,9 @@ describe('<Slide />', () => {
       expect(handleExiting.callCount).to.equal(1);
       expect(handleExiting.args[0][0]).to.equal(child);
 
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
       expect(handleExited.callCount).to.equal(1);
       expect(handleExited.args[0][0]).to.equal(child);
     });
@@ -580,19 +605,42 @@ describe('<Slide />', () => {
     });
 
     describe('resize', () => {
-      clock.withFakeTimers();
+      /** @type {import('sinon').SinonFakeTimers | null} */
+      let timer = null;
+
+      beforeEach(() => {
+        timer = useFakeTimers({
+          shouldClearNativeTimers: true,
+          toFake: [
+            'performance',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'Date',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+          ],
+        });
+      });
+
+      afterEach(() => {
+        timer?.restore();
+      });
 
-      it('should recompute the correct position', () => {
+      it('should recompute the correct position', async () => {
         const { container } = render(
           <Slide direction="up" in={false}>
             <div id="testChild">Foo</div>
           </Slide>,
         );
 
-        act(() => {
+        await act(async () => {
           window.dispatchEvent(new window.Event('resize', {}));
         });
-        clock.tick(166);
+        await act(async () => {
+          await timer?.tickAsync(166);
+        });
 
         const child = container.querySelector('#testChild');
         expect(child.style.transform).not.to.equal(undefined);
@@ -615,12 +663,14 @@ describe('<Slide />', () => {
         expect(element.style.transform).to.equal(`translateY(${global.innerHeight - 780}px)`);
       });
 
-      it('should do nothing when visible', () => {
+      it('should do nothing when visible', async () => {
         render(<Slide {...defaultProps} />);
-        act(() => {
+        await act(async () => {
           window.dispatchEvent(new window.Event('resize', {}));
         });
-        clock.tick(166);
+        await act(async () => {
+          await timer?.tickAsync(166);
+        });
       });
     });
   });
diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
index ff4a400ad95e35..116a1ac928ce60 100644
--- a/packages/mui-material/src/Slider/Slider.test.js
+++ b/packages/mui-material/src/Slider/Slider.test.js
@@ -71,7 +71,7 @@ describe('<Slider />', () => {
     }),
   );
 
-  it('should call handlers', () => {
+  it('should call handlers', async () => {
     const handleChange = spy();
     const handleChangeCommitted = spy();
 
@@ -98,7 +98,7 @@ describe('<Slider />', () => {
     expect(handleChangeCommitted.callCount).to.equal(1);
     expect(handleChangeCommitted.args[0][1]).to.equal(10);
 
-    act(() => {
+    await act(async () => {
       slider.focus();
     });
     fireEvent.change(slider, { target: { value: 23 } });
@@ -257,11 +257,11 @@ describe('<Slider />', () => {
   });
 
   describe('range', () => {
-    it('should support keyboard', () => {
+    it('should support keyboard', async () => {
       const { getAllByRole } = render(<Slider defaultValue={[20, 30]} />);
       const [slider1, slider2] = getAllByRole('slider');
 
-      act(() => {
+      await act(async () => {
         slider1.focus();
       });
       fireEvent.change(slider1, { target: { value: '21' } });
@@ -269,7 +269,7 @@ describe('<Slider />', () => {
       expect(slider1.getAttribute('aria-valuenow')).to.equal('21');
       expect(slider2.getAttribute('aria-valuenow')).to.equal('30');
 
-      act(() => {
+      await act(async () => {
         slider2.focus();
         fireEvent.change(slider2, { target: { value: '31' } });
       });
@@ -277,7 +277,7 @@ describe('<Slider />', () => {
       expect(slider1.getAttribute('aria-valuenow')).to.equal('21');
       expect(slider2.getAttribute('aria-valuenow')).to.equal('31');
 
-      act(() => {
+      await act(async () => {
         slider1.focus();
       });
       fireEvent.change(slider1, { target: { value: '31' } });
@@ -286,7 +286,7 @@ describe('<Slider />', () => {
       expect(slider2.getAttribute('aria-valuenow')).to.equal('31');
       expect(document.activeElement).to.have.attribute('data-index', '0');
 
-      act(() => {
+      await act(async () => {
         slider1.focus();
       });
       fireEvent.change(slider1, { target: { value: '32' } });
@@ -296,13 +296,13 @@ describe('<Slider />', () => {
       expect(document.activeElement).to.have.attribute('data-index', '1');
     });
 
-    it('custom marks with restricted float values should support keyboard', () => {
+    it('custom marks with restricted float values should support keyboard', async () => {
       const getMarks = (value) => value.map((val) => ({ value: val, label: val }));
 
       const { getByRole } = render(<Slider step={null} marks={getMarks([0.5, 30.45, 90.53])} />);
       const slider = getByRole('slider');
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -460,12 +460,12 @@ describe('<Slider />', () => {
       });
     });
 
-    it('change events with non integer numbers should work', () => {
+    it('change events with non integer numbers should work', async () => {
       const { getByRole } = render(
         <Slider defaultValue={0.2} min={-100} max={100} step={0.00000001} />,
       );
       const slider = getByRole('slider');
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -479,13 +479,13 @@ describe('<Slider />', () => {
       expect(slider).to.have.attribute('aria-valuenow', '1e-7');
     });
 
-    it('should round value to step precision', () => {
+    it('should round value to step precision', async () => {
       const { getByRole, container } = render(
         <Slider defaultValue={0.2} min={0} max={1} step={0.1} />,
       );
       const slider = getByRole('slider');
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -496,7 +496,7 @@ describe('<Slider />', () => {
         left: 0,
       }));
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -520,13 +520,13 @@ describe('<Slider />', () => {
       expect(slider).to.have.attribute('aria-valuenow', '0.4');
     });
 
-    it('should not fail to round value to step precision when step is very small', () => {
+    it('should not fail to round value to step precision when step is very small', async () => {
       const { getByRole, container } = render(
         <Slider defaultValue={0.00000002} min={0} max={0.0000001} step={0.00000001} />,
       );
       const slider = getByRole('slider');
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -537,7 +537,7 @@ describe('<Slider />', () => {
         left: 0,
       }));
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -555,13 +555,13 @@ describe('<Slider />', () => {
       expect(slider).to.have.attribute('aria-valuenow', '8e-8');
     });
 
-    it('should not fail to round value to step precision when step is very small and negative', () => {
+    it('should not fail to round value to step precision when step is very small and negative', async () => {
       const { getByRole, container } = render(
         <Slider defaultValue={-0.00000002} min={-0.0000001} max={0} step={0.00000001} />,
       );
       const slider = getByRole('slider');
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -572,7 +572,7 @@ describe('<Slider />', () => {
         left: 0,
       }));
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -635,7 +635,7 @@ describe('<Slider />', () => {
       expect(thumb).to.have.attribute('aria-valuenow', '21');
     });
 
-    it('is not focused (visibly) after becoming disabled', function test() {
+    it('is not focused (visibly) after becoming disabled', async function test() {
       // TODO: Don't skip once a fix for https://github.com/jsdom/jsdom/issues/3029 is released.
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
@@ -644,7 +644,7 @@ describe('<Slider />', () => {
       const { getByRole, setProps } = render(<Slider defaultValue={0} />);
 
       const thumb = getByRole('slider');
-      act(() => {
+      await act(async () => {
         thumb.focus();
       });
       setProps({ disabled: true });
@@ -691,10 +691,10 @@ describe('<Slider />', () => {
   });
 
   describe('aria-valuenow', () => {
-    it('should update the aria-valuenow', () => {
+    it('should update the aria-valuenow', async () => {
       const { getByRole } = render(<Slider defaultValue={50} />);
       const slider = getByRole('slider');
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -716,22 +716,22 @@ describe('<Slider />', () => {
       expect(slider).to.have.attribute('min', String(min));
     });
 
-    it('should use min as the step origin', () => {
+    it('should use min as the step origin', async () => {
       const min = 150;
       const { getByRole } = render(<Slider defaultValue={150} step={100} max={750} min={min} />);
       const slider = getByRole('slider');
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
       expect(slider).to.have.attribute('aria-valuenow', String(min));
     });
 
-    it('should not go less than the min', () => {
+    it('should not go less than the min', async () => {
       const min = 150;
       const { getByRole } = render(<Slider defaultValue={150} step={100} max={750} min={min} />);
       const slider = getByRole('slider');
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -750,11 +750,11 @@ describe('<Slider />', () => {
       expect(slider).to.have.attribute('max', String(max));
     });
 
-    it('should not go more than the max', () => {
+    it('should not go more than the max', async () => {
       const max = 750;
       const { getByRole } = render(<Slider defaultValue={150} step={100} max={max} min={150} />);
       const slider = getByRole('slider');
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -762,7 +762,7 @@ describe('<Slider />', () => {
       expect(slider).to.have.attribute('aria-valuenow', String(max));
     });
 
-    it('should reach right edge value', () => {
+    it('should reach right edge value', async () => {
       const { getByRole, container } = render(
         <Slider defaultValue={90} min={6} max={108} step={10} />,
       );
@@ -775,7 +775,7 @@ describe('<Slider />', () => {
       }));
 
       const thumb = getByRole('slider');
-      act(() => {
+      await act(async () => {
         thumb.focus();
       });
 
@@ -931,7 +931,7 @@ describe('<Slider />', () => {
   });
 
   describe('rtl', () => {
-    it('should add direction css', () => {
+    it('should add direction css', async () => {
       const { getByRole } = render(
         <ThemeProvider
           theme={createTheme({
@@ -942,7 +942,7 @@ describe('<Slider />', () => {
         </ThemeProvider>,
       );
       const thumb = getByRole('slider');
-      act(() => {
+      await act(async () => {
         thumb.focus();
       });
 
@@ -1002,7 +1002,7 @@ describe('<Slider />', () => {
       describe(direction, () => {
         describe(`orientation: ${orientation}`, () => {
           decrementKeys.forEach((key) => {
-            it(`key: ${key} decrements the value`, () => {
+            it(`key: ${key} decrements the value`, async () => {
               const { getByRole } = render(
                 <ThemeProvider
                   theme={createTheme({
@@ -1016,7 +1016,7 @@ describe('<Slider />', () => {
               const slider = getByRole('slider');
               expect(slider).to.have.attribute('aria-valuenow', '50');
 
-              act(() => {
+              await act(async () => {
                 slider.focus();
               });
 
@@ -1029,7 +1029,7 @@ describe('<Slider />', () => {
           });
 
           incrementKeys.forEach((key) => {
-            it(`key: ${key} increments the value`, () => {
+            it(`key: ${key} increments the value`, async () => {
               const { getByRole } = render(
                 <ThemeProvider
                   theme={createTheme({
@@ -1043,7 +1043,7 @@ describe('<Slider />', () => {
               const slider = getByRole('slider');
               expect(slider).to.have.attribute('aria-valuenow', '50');
 
-              act(() => {
+              await act(async () => {
                 slider.focus();
               });
 
@@ -1055,7 +1055,7 @@ describe('<Slider />', () => {
             });
           });
 
-          it('key: PageUp and key: PageDown change the value based on `shiftStep`', () => {
+          it('key: PageUp and key: PageDown change the value based on `shiftStep`', async () => {
             const { getByRole } = render(
               <ThemeProvider
                 theme={createTheme({
@@ -1069,7 +1069,7 @@ describe('<Slider />', () => {
             const slider = getByRole('slider');
             expect(slider).to.have.attribute('aria-valuenow', '50');
 
-            act(() => {
+            await act(async () => {
               slider.focus();
             });
 
@@ -1083,7 +1083,7 @@ describe('<Slider />', () => {
             expect(slider).to.have.attribute('aria-valuenow', '45');
           });
 
-          it('key: End sets the value to max', () => {
+          it('key: End sets the value to max', async () => {
             const { getByRole } = render(
               <ThemeProvider
                 theme={createTheme({
@@ -1097,7 +1097,7 @@ describe('<Slider />', () => {
             const slider = getByRole('slider');
             expect(slider).to.have.attribute('aria-valuenow', '50');
 
-            act(() => {
+            await act(async () => {
               slider.focus();
             });
 
@@ -1105,7 +1105,7 @@ describe('<Slider />', () => {
             expect(slider).to.have.attribute('aria-valuenow', '99');
           });
 
-          it('key: Home sets the value to min', () => {
+          it('key: Home sets the value to min', async () => {
             const { getByRole } = render(
               <ThemeProvider
                 theme={createTheme({
@@ -1119,7 +1119,7 @@ describe('<Slider />', () => {
             const slider = getByRole('slider');
             expect(slider).to.have.attribute('aria-valuenow', '50');
 
-            act(() => {
+            await act(async () => {
               slider.focus();
             });
 
@@ -1129,7 +1129,7 @@ describe('<Slider />', () => {
 
           describe('when `step` is `null` and values are restricted by `marks`', () => {
             decrementKeys.forEach((key) => {
-              it(`key: ${key} decrements the value`, () => {
+              it(`key: ${key} decrements the value`, async () => {
                 const { getByRole } = render(
                   <ThemeProvider
                     theme={createTheme({
@@ -1148,7 +1148,7 @@ describe('<Slider />', () => {
                 const slider = getByRole('slider');
                 expect(slider).to.have.attribute('aria-valuenow', '79');
 
-                act(() => {
+                await act(async () => {
                   slider.focus();
                 });
 
@@ -1161,7 +1161,7 @@ describe('<Slider />', () => {
             });
 
             incrementKeys.forEach((key) => {
-              it(`key: ${key} increments the value`, () => {
+              it(`key: ${key} increments the value`, async () => {
                 const { getByRole } = render(
                   <ThemeProvider
                     theme={createTheme({
@@ -1180,7 +1180,7 @@ describe('<Slider />', () => {
                 const slider = getByRole('slider');
                 expect(slider).to.have.attribute('aria-valuenow', '9');
 
-                act(() => {
+                await act(async () => {
                   slider.focus();
                 });
 
@@ -1196,7 +1196,7 @@ describe('<Slider />', () => {
       });
     });
 
-    it('stops at the max value with custom marks', () => {
+    it('stops at the max value with custom marks', async () => {
       const handleChange = stub();
       render(
         <Slider
@@ -1210,7 +1210,7 @@ describe('<Slider />', () => {
       const slider = screen.getByRole('slider');
       expect(slider).to.have.attribute('aria-valuenow', '30');
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -1220,7 +1220,7 @@ describe('<Slider />', () => {
       expect(slider).to.have.attribute('aria-valuenow', '30');
     });
 
-    it('stops at the min value with custom marks', () => {
+    it('stops at the min value with custom marks', async () => {
       const handleChange = stub();
       render(
         <Slider
@@ -1234,7 +1234,7 @@ describe('<Slider />', () => {
       const slider = screen.getByRole('slider');
       expect(slider).to.have.attribute('aria-valuenow', '10');
 
-      act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -1342,14 +1342,14 @@ describe('<Slider />', () => {
     expect(container.querySelectorAll(`.${classes.markLabel}`).length).to.equal(2);
   });
 
-  it('should pass "name" and "value" as part of the event.target for onChange', () => {
+  it('should pass "name" and "value" as part of the event.target for onChange', async () => {
     const handleChange = stub().callsFake((event) => event.target);
     const { getByRole } = render(
       <Slider onChange={handleChange} name="change-testing" value={3} />,
     );
     const slider = getByRole('slider');
 
-    act(() => {
+    await act(async () => {
       slider.focus();
     });
     fireEvent.change(slider, {
@@ -1527,14 +1527,14 @@ describe('<Slider />', () => {
   });
 
   describe('prop: disableSwap', () => {
-    it('should bound the value when using the keyboard', () => {
+    it('should bound the value when using the keyboard', async () => {
       const handleChange = spy();
       const { getAllByRole } = render(
         <Slider defaultValue={[20, 30]} disableSwap onChange={handleChange} />,
       );
       const [slider1, slider2] = getAllByRole('slider');
 
-      act(() => {
+      await act(async () => {
         slider1.focus();
       });
       fireEvent.change(slider2, { target: { value: '19' } });
diff --git a/packages/mui-material/src/Snackbar/Snackbar.test.js b/packages/mui-material/src/Snackbar/Snackbar.test.js
index 8e8c9c7809e533..470e69fbb12d22 100644
--- a/packages/mui-material/src/Snackbar/Snackbar.test.js
+++ b/packages/mui-material/src/Snackbar/Snackbar.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Snackbar, { snackbarClasses as classes } from '@mui/material/Snackbar';
 import { snackbarContentClasses } from '@mui/material/SnackbarContent';
@@ -9,7 +9,30 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Snackbar />', () => {
-  const { clock, render: clientRender } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render: clientRender } = createRenderer();
   /**
    * @type  {typeof plainRender extends (...args: infer T) => any ? T : never} args
    *
@@ -20,9 +43,11 @@ describe('<Snackbar />', () => {
    * We have to defer the effect manually like `useEffect` would so we have to flush the effect manually instead of relying on `act()`.
    * React bug: https://github.com/facebook/react/issues/20074
    */
-  function render(...args) {
+  async function render(...args) {
     const result = clientRender(...args);
-    clock.tick(0);
+    await act(async () => {
+      await timer?.tickAsync(0);
+    });
     return result;
   }
 
@@ -43,7 +68,7 @@ describe('<Snackbar />', () => {
   describeConformance(<Snackbar open message="message" />, () => ({
     classes,
     inheritComponent: 'div',
-    render,
+    render: clientRender,
     refInstanceof: window.HTMLDivElement,
     muiName: 'MuiSnackbar',
     skip: ['componentProp', 'componentsProp', 'themeVariants'],
@@ -64,9 +89,9 @@ describe('<Snackbar />', () => {
   }));
 
   describe('prop: onClose', () => {
-    it('should be call when clicking away', () => {
+    it('should be call when clicking away', async () => {
       const handleClose = spy();
-      render(<Snackbar open onClose={handleClose} message="message" />);
+      await render(<Snackbar open onClose={handleClose} message="message" />);
 
       const event = new window.Event('click', { bubbles: true, cancelable: true });
       document.body.dispatchEvent(event);
@@ -75,19 +100,19 @@ describe('<Snackbar />', () => {
       expect(handleClose.args[0]).to.deep.equal([event, 'clickaway']);
     });
 
-    it('should be called when pressing Escape', () => {
+    it('should be called when pressing Escape', async () => {
       const handleClose = spy();
-      render(<Snackbar open onClose={handleClose} message="message" />);
+      await render(<Snackbar open onClose={handleClose} message="message" />);
 
       expect(fireEvent.keyDown(document.body, { key: 'Escape' })).to.equal(true);
       expect(handleClose.callCount).to.equal(1);
       expect(handleClose.args[0][1]).to.deep.equal('escapeKeyDown');
     });
 
-    it('can limit which Snackbars are closed when pressing Escape', () => {
+    it('can limit which Snackbars are closed when pressing Escape', async () => {
       const handleCloseA = spy((event) => event.preventDefault());
       const handleCloseB = spy();
-      render(
+      await render(
         <React.Fragment>
           <Snackbar open onClose={handleCloseA} message="messageA" />
           <Snackbar open onClose={handleCloseB} message="messageB" />
@@ -102,7 +127,7 @@ describe('<Snackbar />', () => {
   });
 
   describe('Consecutive messages', () => {
-    it('should support synchronous onExited callback', () => {
+    it('should support synchronous onExited callback', async () => {
       const messageCount = 2;
 
       const onClose = spy();
@@ -138,7 +163,7 @@ describe('<Snackbar />', () => {
           />
         );
       }
-      render(
+      await render(
         <Test
           onClose={onClose}
           onExited={onExited}
@@ -151,25 +176,33 @@ describe('<Snackbar />', () => {
       expect(onClose.callCount).to.equal(0);
       expect(onExited.callCount).to.equal(0);
 
-      act(() => {
+      await act(async () => {
         setSnackbarOpen(true);
       });
-      clock.tick(duration);
+      await act(async () => {
+        await timer?.tickAsync(duration);
+      });
 
       expect(onClose.callCount).to.equal(1);
       expect(onExited.callCount).to.equal(0);
 
-      clock.tick(duration / 2);
+      await act(async () => {
+        await timer?.tickAsync(duration / 2);
+      });
 
       expect(onClose.callCount).to.equal(1);
       expect(onExited.callCount).to.equal(1);
 
-      clock.tick(duration);
+      await act(async () => {
+        await timer?.tickAsync(duration);
+      });
 
       expect(onClose.callCount).to.equal(messageCount);
       expect(onExited.callCount).to.equal(1);
 
-      clock.tick(duration / 2);
+      await act(async () => {
+        await timer?.tickAsync(duration / 2);
+      });
 
       expect(onClose.callCount).to.equal(messageCount);
       expect(onExited.callCount).to.equal(messageCount);
@@ -177,10 +210,10 @@ describe('<Snackbar />', () => {
   });
 
   describe('prop: autoHideDuration', () => {
-    it('should call onClose when the timer is done', () => {
+    it('should call onClose when the timer is done', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      const { setProps } = render(
+      const { setProps } = await render(
         <Snackbar
           open={false}
           onClose={handleClose}
@@ -193,17 +226,19 @@ describe('<Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(1);
       expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
     });
 
-    it('calls onClose at timeout even if the prop changes', () => {
+    it('calls onClose at timeout even if the prop changes', async () => {
       const handleClose1 = spy();
       const handleClose2 = spy();
       const autoHideDuration = 2e3;
-      const { setProps } = render(
+      const { setProps } = await render(
         <Snackbar
           open={false}
           onClose={handleClose1}
@@ -213,18 +248,22 @@ describe('<Snackbar />', () => {
       );
 
       setProps({ open: true });
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
       setProps({ open: true, onClose: handleClose2 });
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
 
       expect(handleClose1.callCount).to.equal(0);
       expect(handleClose2.callCount).to.equal(1);
     });
 
-    it('should not call onClose when the autoHideDuration is reset', () => {
+    it('should not call onClose when the autoHideDuration is reset', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      const { setProps } = render(
+      const { setProps } = await render(
         <Snackbar
           open={false}
           onClose={handleClose}
@@ -237,45 +276,55 @@ describe('<Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
       setProps({ autoHideDuration: undefined });
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
 
       expect(handleClose.callCount).to.equal(0);
     });
 
-    it('should not call onClose if autoHideDuration is undefined', () => {
+    it('should not call onClose if autoHideDuration is undefined', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      render(
+      await render(
         <Snackbar open onClose={handleClose} message="message" autoHideDuration={undefined} />,
       );
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(0);
     });
 
-    it('should not call onClose if autoHideDuration is null', () => {
+    it('should not call onClose if autoHideDuration is null', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
 
-      render(<Snackbar open onClose={handleClose} message="message" autoHideDuration={null} />);
+      await render(
+        <Snackbar open onClose={handleClose} message="message" autoHideDuration={null} />,
+      );
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(0);
     });
 
-    it('should not call onClose when closed', () => {
+    it('should not call onClose when closed', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
 
-      const { setProps } = render(
+      const { setProps } = await render(
         <Snackbar
           open
           onClose={handleClose}
@@ -286,9 +335,13 @@ describe('<Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
       setProps({ open: false });
-      clock.tick(autoHideDuration / 2);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration / 2);
+      });
 
       expect(handleClose.callCount).to.equal(0);
     });
@@ -302,12 +355,16 @@ describe('<Snackbar />', () => {
     },
     {
       type: 'keyboard',
-      enter: (container) => act(() => container.querySelector('button').focus()),
-      leave: (container) => act(() => container.querySelector('button').blur()),
+      enter: async (container) => {
+        await act(async () => container.querySelector('button').focus());
+      },
+      leave: async (container) => {
+        await act(async () => container.querySelector('button').blur());
+      },
     },
   ].forEach((userInteraction) => {
     describe(`interacting with ${userInteraction.type}`, () => {
-      it('should be able to interrupt the timer', () => {
+      it('should be able to interrupt the timer', async () => {
         const handleMouseEnter = spy();
         const handleMouseLeave = spy();
         const handleBlur = spy();
@@ -315,7 +372,7 @@ describe('<Snackbar />', () => {
         const handleClose = spy();
         const autoHideDuration = 2e3;
 
-        const { container } = render(
+        const { container } = await render(
           <Snackbar
             action={<button>undo</button>}
             open
@@ -331,8 +388,10 @@ describe('<Snackbar />', () => {
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(autoHideDuration / 2);
-        userInteraction.enter(container.querySelector('div'));
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.enter(container.querySelector('div'));
 
         if (userInteraction.type === 'keyboard') {
           expect(handleFocus.callCount).to.equal(1);
@@ -340,8 +399,10 @@ describe('<Snackbar />', () => {
           expect(handleMouseEnter.callCount).to.equal(1);
         }
 
-        clock.tick(autoHideDuration / 2);
-        userInteraction.leave(container.querySelector('div'));
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.leave(container.querySelector('div'));
 
         if (userInteraction.type === 'keyboard') {
           expect(handleBlur.callCount).to.equal(1);
@@ -350,18 +411,20 @@ describe('<Snackbar />', () => {
         }
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(2e3);
+        await act(async () => {
+          await timer?.tickAsync(2e3);
+        });
 
         expect(handleClose.callCount).to.equal(1);
         expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
       });
 
-      it('should not call onClose with not timeout after user interaction', () => {
+      it('should not call onClose with not timeout after user interaction', async () => {
         const handleClose = spy();
         const autoHideDuration = 2e3;
         const resumeHideDuration = 3e3;
 
-        const { container } = render(
+        const { container } = await render(
           <Snackbar
             action={<button>undo</button>}
             open
@@ -374,24 +437,30 @@ describe('<Snackbar />', () => {
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(autoHideDuration / 2);
-        userInteraction.enter(container.querySelector('div'));
-        clock.tick(autoHideDuration / 2);
-        userInteraction.leave(container.querySelector('div'));
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.enter(container.querySelector('div'));
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.leave(container.querySelector('div'));
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(2e3);
+        await act(async () => {
+          await timer?.tickAsync(2e3);
+        });
 
         expect(handleClose.callCount).to.equal(0);
       });
 
-      it('should call onClose when timer done after user interaction', () => {
+      it('should call onClose when timer done after user interaction', async () => {
         const handleClose = spy();
         const autoHideDuration = 2e3;
         const resumeHideDuration = 3e3;
 
-        const { container } = render(
+        const { container } = await render(
           <Snackbar
             action={<button>undo</button>}
             open
@@ -404,24 +473,30 @@ describe('<Snackbar />', () => {
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(autoHideDuration / 2);
-        userInteraction.enter(container.querySelector('div'));
-        clock.tick(autoHideDuration / 2);
-        userInteraction.leave(container.querySelector('div'));
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.enter(container.querySelector('div'));
+        await act(async () => {
+          await timer?.tickAsync(autoHideDuration / 2);
+        });
+        await userInteraction.leave(container.querySelector('div'));
 
         expect(handleClose.callCount).to.equal(0);
 
-        clock.tick(resumeHideDuration);
+        await act(async () => {
+          await timer?.tickAsync(resumeHideDuration);
+        });
 
         expect(handleClose.callCount).to.equal(1);
         expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
       });
 
-      it('should call onClose immediately after user interaction when 0', () => {
+      it('should call onClose immediately after user interaction when 0', async () => {
         const handleClose = spy();
         const autoHideDuration = 6e3;
         const resumeHideDuration = 0;
-        const { setProps, container } = render(
+        const { setProps, container } = await render(
           <Snackbar
             action={<button>undo</button>}
             open
@@ -436,10 +511,14 @@ describe('<Snackbar />', () => {
 
         expect(handleClose.callCount).to.equal(0);
 
-        userInteraction.enter(container.querySelector('div'));
-        clock.tick(100);
-        userInteraction.leave(container.querySelector('div'));
-        clock.tick(resumeHideDuration);
+        await userInteraction.enter(container.querySelector('div'));
+        await act(async () => {
+          await timer?.tickAsync(100);
+        });
+        await userInteraction.leave(container.querySelector('div'));
+        await act(async () => {
+          await timer?.tickAsync(resumeHideDuration);
+        });
 
         expect(handleClose.callCount).to.equal(1);
         expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
@@ -448,10 +527,10 @@ describe('<Snackbar />', () => {
   });
 
   describe('prop: disableWindowBlurListener', () => {
-    it('should pause auto hide when not disabled and window lost focus', () => {
+    it('should pause auto hide when not disabled and window lost focus', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      render(
+      await render(
         <Snackbar
           open
           onClose={handleClose}
@@ -461,7 +540,7 @@ describe('<Snackbar />', () => {
         />,
       );
 
-      act(() => {
+      await act(async () => {
         const bEvent = new window.Event('blur', {
           bubbles: false,
           cancelable: false,
@@ -471,11 +550,13 @@ describe('<Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(0);
 
-      act(() => {
+      await act(async () => {
         const fEvent = new window.Event('focus', {
           bubbles: false,
           cancelable: false,
@@ -485,16 +566,18 @@ describe('<Snackbar />', () => {
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(1);
       expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
     });
 
-    it('should not pause auto hide when disabled and window lost focus', () => {
+    it('should not pause auto hide when disabled and window lost focus', async () => {
       const handleClose = spy();
       const autoHideDuration = 2e3;
-      render(
+      await render(
         <Snackbar
           open
           onClose={handleClose}
@@ -504,14 +587,16 @@ describe('<Snackbar />', () => {
         />,
       );
 
-      act(() => {
+      await act(async () => {
         const event = new window.Event('blur', { bubbles: false, cancelable: false });
         window.dispatchEvent(event);
       });
 
       expect(handleClose.callCount).to.equal(0);
 
-      clock.tick(autoHideDuration);
+      await act(async () => {
+        await timer?.tickAsync(autoHideDuration);
+      });
 
       expect(handleClose.callCount).to.equal(1);
       expect(handleClose.args[0]).to.deep.equal([null, 'timeout']);
@@ -519,13 +604,15 @@ describe('<Snackbar />', () => {
   });
 
   describe('prop: open', () => {
-    it('should not render anything when closed', () => {
-      const { container } = render(<Snackbar open={false} message="Hello, World!" />);
+    it('should not render anything when closed', async () => {
+      const { container } = await render(<Snackbar open={false} message="Hello, World!" />);
       expect(container).to.have.text('');
     });
 
-    it('should be able show it after mounted', () => {
-      const { container, setProps } = render(<Snackbar open={false} message="Hello, World!" />);
+    it('should be able show it after mounted', async () => {
+      const { container, setProps } = await render(
+        <Snackbar open={false} message="Hello, World!" />,
+      );
       expect(container).to.have.text('');
       setProps({ open: true });
       expect(container).to.have.text('Hello, World!');
@@ -533,18 +620,18 @@ describe('<Snackbar />', () => {
   });
 
   describe('prop: children', () => {
-    it('should render the children', () => {
+    it('should render the children', async () => {
       const nodeRef = React.createRef();
       const children = <div ref={nodeRef} />;
-      const { container } = render(<Snackbar open>{children}</Snackbar>);
+      const { container } = await render(<Snackbar open>{children}</Snackbar>);
       expect(container).to.contain(nodeRef.current);
     });
   });
 
   describe('prop: TransitionComponent', () => {
-    it('should use a Grow by default', () => {
+    it('should use a Grow by default', async () => {
       const childRef = React.createRef();
-      render(
+      await render(
         <Snackbar open message="message">
           <div ref={childRef} />
         </Snackbar>,
@@ -552,25 +639,25 @@ describe('<Snackbar />', () => {
       expect(childRef.current.style.transform).to.contain('scale');
     });
 
-    it('accepts a different component that handles the transition', () => {
+    it('accepts a different component that handles the transition', async () => {
       const transitionRef = React.createRef();
       function Transition() {
         return <div className="cloned-element-class" ref={transitionRef} />;
       }
-      const { container } = render(<Snackbar open TransitionComponent={Transition} />);
+      const { container } = await render(<Snackbar open TransitionComponent={Transition} />);
       expect(container).to.contain(transitionRef.current);
     });
   });
 
   describe('prop: transitionDuration', () => {
-    it('should render the default theme values by default', function test() {
+    it('should render the default theme values by default', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
 
       const theme = createTheme();
       const enteringScreenDurationInSeconds = theme.transitions.duration.enteringScreen / 1000;
-      const { getByTestId } = render(
+      const { getByTestId } = await render(
         <Snackbar open message="Hello, World!">
           <div data-testid="child">Foo</div>
         </Snackbar>,
@@ -582,7 +669,7 @@ describe('<Snackbar />', () => {
       });
     });
 
-    it('should render the custom theme values', function test() {
+    it('should render the custom theme values', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
@@ -595,7 +682,7 @@ describe('<Snackbar />', () => {
         },
       });
 
-      const { getByTestId } = render(
+      const { getByTestId } = await render(
         <ThemeProvider theme={theme}>
           <Snackbar open message="Hello, World!">
             <div data-testid="child">Foo</div>
@@ -607,12 +694,12 @@ describe('<Snackbar />', () => {
       expect(child).toHaveComputedStyle({ transitionDuration: '0.001s, 0.001s' });
     });
 
-    it('should render the values provided via prop', function test() {
+    it('should render the values provided via prop', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         this.skip();
       }
 
-      const { getByTestId } = render(
+      const { getByTestId } = await render(
         <Snackbar open message="Hello, World!" transitionDuration={1}>
           <div data-testid="child">Foo</div>
         </Snackbar>,
@@ -623,9 +710,9 @@ describe('<Snackbar />', () => {
     });
   });
 
-  it('should skip default clickAway behavior when defaultMuiPrevented is true', () => {
+  it('should skip default clickAway behavior when defaultMuiPrevented is true', async () => {
     const handleClose = spy();
-    render(
+    await render(
       <Snackbar
         open
         onClose={handleClose}
diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js
index 9e212e4f747002..8b375ce1069306 100644
--- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js
+++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import {
   createRenderer,
   act,
@@ -16,7 +16,30 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
 describe('<SpeedDial />', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   const icon = <Icon>font_icon</Icon>;
   function FakeAction() {
@@ -86,7 +109,7 @@ describe('<SpeedDial />', () => {
     expect(actions.map((element) => element.className)).not.to.contain('is-closed');
   });
 
-  it('should reset the state of the tooltip when the speed dial is closed while it is open', () => {
+  it('should reset the state of the tooltip when the speed dial is closed while it is open', async () => {
     const { queryByRole, getByRole, getAllByRole } = render(
       <SpeedDial icon={icon} ariaLabel="mySpeedDial">
         <SpeedDialAction icon={icon} tooltipTitle="SpeedDialAction1" />
@@ -97,19 +120,27 @@ describe('<SpeedDial />', () => {
     const actions = getAllByRole('menuitem');
 
     fireEvent.mouseEnter(fab);
-    clock.runAll();
+    await act(async () => {
+      await timer?.tickAsync(Infinity);
+    });
     expect(fab).to.have.attribute('aria-expanded', 'true');
 
     fireEvent.mouseOver(actions[0]);
-    clock.runAll();
+    await act(async () => {
+      await timer?.tickAsync(Infinity);
+    });
     expect(queryByRole('tooltip')).not.to.equal(null);
 
     fireEvent.mouseLeave(actions[0]);
-    clock.runAll();
+    await act(async () => {
+      await timer?.tickAsync(Infinity);
+    });
     expect(fab).to.have.attribute('aria-expanded', 'false');
 
     fireEvent.mouseEnter(fab);
-    clock.runAll();
+    await act(async () => {
+      await timer?.tickAsync(Infinity);
+    });
     expect(queryByRole('tooltip')).to.equal(null);
     expect(fab).to.have.attribute('aria-expanded', 'true');
   });
@@ -161,7 +192,7 @@ describe('<SpeedDial />', () => {
       ['left', 'tooltipPlacementTop'],
       ['right', 'tooltipPlacementTop'],
     ].forEach(([direction, className]) => {
-      it(`should place the tooltip in the correct position when direction=${direction}`, () => {
+      it(`should place the tooltip in the correct position when direction=${direction}`, async () => {
         const { getByRole, getAllByRole } = render(
           <SpeedDial {...defaultProps} open direction={direction.toLowerCase()}>
             <SpeedDialAction icon={icon} tooltipTitle="action1" />
@@ -170,7 +201,9 @@ describe('<SpeedDial />', () => {
         );
         const actions = getAllByRole('menuitem');
         fireEvent.mouseOver(actions[0]);
-        clock.runAll();
+        await act(async () => {
+          await timer?.tickAsync(Infinity);
+        });
         expect(getByRole('tooltip').firstChild).to.have.class(tooltipClasses[className]);
       });
     });
@@ -188,8 +221,8 @@ describe('<SpeedDial />', () => {
       const fab = getByRole('button');
       await act(async () => {
         fab.focus();
+        await timer?.tickAsync(1);
       });
-      clock.tick();
 
       expect(handleOpen.callCount).to.equal(1);
       const actions = getAllByRole('menuitem');
@@ -217,23 +250,29 @@ describe('<SpeedDial />', () => {
 
       await act(async () => {
         fab.focus();
+        await timer?.tickAsync(Infinity);
       });
-      clock.runAll();
 
       expect(fab).to.have.attribute('aria-expanded', 'true');
 
       fireEvent.keyDown(fab, { key: 'ArrowUp' });
-      clock.runAll();
+      await act(async () => {
+        await timer?.tickAsync(Infinity);
+      });
       expect(queryByRole('tooltip')).not.to.equal(null);
 
       fireDiscreteEvent.keyDown(actions[0], { key: 'Escape' });
-      clock.runAll();
+      await act(async () => {
+        await timer?.tickAsync(Infinity);
+      });
 
       expect(queryByRole('tooltip')).to.equal(null);
       expect(fab).to.have.attribute('aria-expanded', 'false');
       expect(fab).toHaveFocus();
 
-      clock.runAll();
+      await act(async () => {
+        await timer?.tickAsync(Infinity);
+      });
 
       expect(queryByRole('tooltip')).to.equal(null);
       expect(fab).to.have.attribute('aria-expanded', 'false');
diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js
index 9cf1e7f9a1eb9f..112cc3f3f1a850 100644
--- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js
+++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, fireEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
+import { useFakeTimers } from 'sinon';
 import Icon from '@mui/material/Icon';
 import Tooltip from '@mui/material/Tooltip';
 import { fabClasses } from '@mui/material/Fab';
@@ -16,7 +17,30 @@ const CustomTooltip = React.forwardRef(({ onOpen, onClose, ownerState, ...props
 ));
 
 describe('<SpeedDialAction />', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   describeConformance(
     <SpeedDialAction icon={<Icon>add</Icon>} tooltipTitle="placeholder" />,
@@ -44,7 +68,7 @@ describe('<SpeedDialAction />', () => {
     }),
   );
 
-  it('should be able to change the Tooltip classes', () => {
+  it('should be able to change the Tooltip classes', async () => {
     const { getByText, container } = render(
       <SpeedDialAction
         icon={<Icon>add</Icon>}
@@ -55,12 +79,14 @@ describe('<SpeedDialAction />', () => {
     );
 
     fireEvent.mouseOver(container.querySelector('button'));
-    clock.tick(100);
+    await act(async () => {
+      await timer?.tickAsync(100);
+    });
 
     expect(getByText('placeholder')).to.have.class('bar');
   });
 
-  it('should be able to change the slotProps.tooltip.classes', () => {
+  it('should be able to change the slotProps.tooltip.classes', async () => {
     const { getByText, container } = render(
       <SpeedDialAction
         icon={<Icon>add</Icon>}
@@ -75,7 +101,9 @@ describe('<SpeedDialAction />', () => {
     );
 
     fireEvent.mouseOver(container.querySelector('button'));
-    clock.tick(100);
+    await act(async () => {
+      await timer?.tickAsync(100);
+    });
 
     expect(getByText('placeholder')).to.have.class('bar');
   });
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index 21d49bb9bc010a..3d6a04bd7a59ec 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import { fireEvent, createRenderer, screen } from '@mui/internal-test-utils';
 import PropTypes, { checkPropTypes } from 'prop-types';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
@@ -60,7 +60,32 @@ const NullPaper = React.forwardRef(function NullPaper(props, ref) {
 });
 
 describe('<SwipeableDrawer />', () => {
-  const { render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    // Handles the warning about an update to a component that is not wrapped in act
+    // by preventing setTimeout to run
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(async () => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   describeConformance(<SwipeableDrawer onOpen={() => {}} onClose={() => {}} open />, () => ({
     render,
diff --git a/packages/mui-material/src/Switch/Switch.test.js b/packages/mui-material/src/Switch/Switch.test.js
index aa41d4229862f6..fd15e1d5cd6bb9 100644
--- a/packages/mui-material/src/Switch/Switch.test.js
+++ b/packages/mui-material/src/Switch/Switch.test.js
@@ -20,6 +20,7 @@ describe('<Switch />', () => {
       { slotName: 'track', slotClassName: classes.track },
       { slotName: 'input', slotClassName: classes.input },
     ],
+
     slots: {
       root: {
         expectedClassName: classes.root,
@@ -112,11 +113,11 @@ describe('<Switch />', () => {
     expect(getByTestId('icon')).toBeVisible();
   });
 
-  specify('the Checked state changes after change events', () => {
+  specify('the Checked state changes after change events', async () => {
     const { getByRole } = render(<Switch defaultChecked />);
 
     // how a user would trigger it
-    act(() => {
+    await act(async () => {
       getByRole('checkbox').click();
       fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
     });
diff --git a/packages/mui-material/src/Tabs/ScrollbarSize.test.js b/packages/mui-material/src/Tabs/ScrollbarSize.test.js
index 45ecf406e77c50..0f9603025c78e5 100644
--- a/packages/mui-material/src/Tabs/ScrollbarSize.test.js
+++ b/packages/mui-material/src/Tabs/ScrollbarSize.test.js
@@ -1,11 +1,34 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy, stub } from 'sinon';
-import { createRenderer } from '@mui/internal-test-utils';
+import { spy, stub, useFakeTimers } from 'sinon';
+import { createRenderer, act } from '@mui/internal-test-utils';
 import ScrollbarSize from './ScrollbarSize';
 
 describe('<ScrollbarSize />', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   describe('mount', () => {
     it('should call on initial load', () => {
@@ -17,7 +40,7 @@ describe('<ScrollbarSize />', () => {
   });
 
   describe('prop: onChange', () => {
-    it('should call on first resize event', () => {
+    it('should call on first resize event', async () => {
       const onChange = spy();
       const { container } = render(<ScrollbarSize onChange={onChange} />);
       stub(container.firstChild, 'offsetHeight').get(() => 20);
@@ -26,12 +49,14 @@ describe('<ScrollbarSize />', () => {
       onChange.resetHistory();
 
       window.dispatchEvent(new window.Event('resize', {}));
-      clock.tick(166);
+      await act(async () => {
+        await timer?.tickAsync(166);
+      });
       expect(onChange.callCount).to.equal(1);
       expect(onChange.args[0][0]).to.equal(20);
     });
 
-    it('should not call if height has not changed from previous resize', () => {
+    it('should not call if height has not changed from previous resize', async () => {
       const onChange = spy();
       const { container } = render(<ScrollbarSize onChange={onChange} />);
       stub(container.firstChild, 'offsetHeight').get(() => 20);
@@ -40,9 +65,13 @@ describe('<ScrollbarSize />', () => {
       onChange.resetHistory();
 
       window.dispatchEvent(new window.Event('resize', {}));
-      clock.tick(166);
+      await act(async () => {
+        await timer?.tickAsync(166);
+      });
       window.dispatchEvent(new window.Event('resize', {}));
-      clock.tick(166);
+      await act(async () => {
+        await timer?.tickAsync(166);
+      });
       expect(onChange.callCount).to.equal(1);
       expect(onChange.args[0][0]).to.equal(20);
     });
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
index b7bb926a878071..616cda806eb794 100644
--- a/packages/mui-material/src/Tabs/Tabs.test.js
+++ b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import {
   act,
   createRenderer,
@@ -49,7 +49,7 @@ describe('<Tabs />', () => {
   // tests mocking getBoundingClientRect prevent mocha to exit
   const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
-  const { clock, render, renderToString } = createRenderer();
+  const { render, renderToString } = createRenderer();
 
   before(function beforeHook() {
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -707,10 +707,31 @@ describe('<Tabs />', () => {
   });
 
   describe('scroll button behavior', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
     it('should scroll visible items', async function test() {
-      clock.restore();
+      timer?.restore();
       if (isJSDOM) {
         this.skip();
       }
@@ -742,7 +763,7 @@ describe('<Tabs />', () => {
       });
     });
 
-    it('should horizontally scroll by width of partially visible item', () => {
+    it('should horizontally scroll by width of partially visible item', async () => {
       const { container, getByRole, getAllByRole } = render(
         <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
           <Tab style={{ width: 220, minWidth: 'auto' }} />
@@ -760,11 +781,13 @@ describe('<Tabs />', () => {
 
       tablistContainer.scrollLeft = 0;
       fireEvent.click(findScrollButton(container, 'right'));
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
       expect(tablistContainer.scrollLeft).equal(200);
     });
 
-    it('should vertically scroll by width of partially visible item', () => {
+    it('should vertically scroll by width of partially visible item', async () => {
       const { container, getByRole, getAllByRole } = render(
         <Tabs
           value={0}
@@ -788,15 +811,38 @@ describe('<Tabs />', () => {
 
       tablistContainer.scrollTop = 0;
       fireEvent.click(findScrollButton(container, 'right'));
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
       expect(tablistContainer.scrollTop).equal(48);
     });
   });
 
   describe('scroll into view behavior', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
 
-    it('should scroll left tab into view', function test() {
+    afterEach(() => {
+      timer?.restore();
+    });
+
+    it('should scroll left tab into view', async function test() {
       if (isJSDOM) {
         this.skip();
       }
@@ -825,7 +871,9 @@ describe('<Tabs />', () => {
         right: 30,
       });
       forceUpdate();
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
       expect(tablistContainer.scrollLeft).to.equal(0);
     });
   });
diff --git a/packages/mui-material/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-material/src/TextareaAutosize/TextareaAutosize.test.tsx
index 3220fee6ec087f..2f4681a0c9e236 100644
--- a/packages/mui-material/src/TextareaAutosize/TextareaAutosize.test.tsx
+++ b/packages/mui-material/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import sinon, { spy, stub } from 'sinon';
+import sinon, { spy, stub, useFakeTimers, SinonFakeTimers } from 'sinon';
 import { act, screen, waitFor, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 
@@ -32,7 +32,7 @@ async function raf() {
 }
 
 describe('<TextareaAutosize />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   // For https://github.com/mui/material-ui/pull/33238
   it('should not crash when unmounting with Suspense', async () => {
@@ -79,7 +79,7 @@ describe('<TextareaAutosize />', () => {
     }
     const { container } = render(<App />);
     const input = container.querySelector<HTMLTextAreaElement>('textarea')!;
-    act(() => {
+    await act(async () => {
       input.focus();
     });
     const activeElement = document.activeElement!;
@@ -134,6 +134,7 @@ describe('<TextareaAutosize />', () => {
     fireEvent.click(button);
     await raf();
     await raf();
+    await act(async () => {});
     expect(parseInt(input.style.height, 10)).to.be.within(15, 17);
   });
 
@@ -181,9 +182,29 @@ describe('<TextareaAutosize />', () => {
     });
 
     describe('resize', () => {
-      clock.withFakeTimers();
+      let timer: SinonFakeTimers | null = null;
+
+      beforeEach(() => {
+        timer = useFakeTimers({
+          shouldClearNativeTimers: true,
+          toFake: [
+            'performance',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'Date',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+          ],
+        });
+      });
+
+      afterEach(() => {
+        timer?.restore();
+      });
 
-      it('should handle the resize event', () => {
+      it('should handle the resize event', async () => {
         const { container } = render(<TextareaAutosize />);
         const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
         const shadow = container.querySelector('textarea[aria-hidden=true]')!;
@@ -198,16 +219,20 @@ describe('<TextareaAutosize />', () => {
           scrollHeight: 30,
           lineHeight: 15,
         });
-        window.dispatchEvent(new window.Event('resize', {}));
+        await act(async () => {
+          window.dispatchEvent(new window.Event('resize', {}));
+        });
 
-        clock.tick(166);
+        await act(async () => {
+          await timer?.tickAsync(166);
+        });
 
         expect(input.style).to.have.property('height', '30px');
         expect(input.style).to.have.property('overflow', 'hidden');
       });
     });
 
-    it('should update when uncontrolled', () => {
+    it('should update when uncontrolled', async () => {
       const handleChange = spy();
       const { container } = render(<TextareaAutosize onChange={handleChange} />);
       const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
@@ -221,7 +246,7 @@ describe('<TextareaAutosize />', () => {
         scrollHeight: 30,
         lineHeight: 15,
       });
-      act(() => {
+      await act(async () => {
         input.focus();
       });
       const activeElement = document.activeElement!;
@@ -395,7 +420,7 @@ describe('<TextareaAutosize />', () => {
       expect(input.style).to.have.property('overflow', 'hidden');
     });
 
-    it('should compute the correct height if padding-right is greater than 0px', () => {
+    it('should compute the correct height if padding-right is greater than 0px', async () => {
       const paddingRight = 50;
       const { container, forceUpdate } = render(<TextareaAutosize style={{ paddingRight }} />);
       const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
@@ -418,7 +443,7 @@ describe('<TextareaAutosize />', () => {
         lineHeight,
       });
 
-      act(() => {
+      await act(async () => {
         input.focus();
       });
       const activeElement = document.activeElement!;
diff --git a/packages/mui-material/src/Tooltip/Tooltip.test.js b/packages/mui-material/src/Tooltip/Tooltip.test.js
index 7b889f38b583b0..4dd2913ef29267 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.test.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import {
   act,
   createRenderer,
@@ -17,12 +17,32 @@ import { testReset } from './Tooltip';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Tooltip />', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
 
   beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
     testReset();
   });
 
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
+
   function TestPopper(props) {
     const { children, className, 'data-testid': testId } = props;
     return (
@@ -283,7 +303,7 @@ describe('<Tooltip />', () => {
     });
   });
 
-  it('should respond to external events', () => {
+  it('should respond to external events', async () => {
     const transitionTimeout = 10;
     const enterDelay = 100;
     render(
@@ -300,19 +320,25 @@ describe('<Tooltip />', () => {
     expect(screen.queryByRole('tooltip')).to.equal(null);
 
     fireEvent.mouseOver(screen.getByRole('button'));
-    clock.tick(enterDelay);
+    await act(async () => {
+      await timer?.tickAsync(enterDelay);
+    });
 
     expect(screen.getByRole('tooltip')).toBeVisible();
 
     fireEvent.mouseLeave(screen.getByRole('button'));
     // Tooltip schedules timeout even with no delay
-    clock.tick(0);
-    clock.tick(transitionTimeout);
+    await act(async () => {
+      await timer?.tickAsync(0);
+    });
+    await act(async () => {
+      await timer?.tickAsync(transitionTimeout);
+    });
 
     expect(screen.queryByRole('tooltip')).to.equal(null);
   });
 
-  it('should be controllable', () => {
+  it('should be controllable', async () => {
     const eventLog = [];
 
     const { setProps } = render(
@@ -337,18 +363,22 @@ describe('<Tooltip />', () => {
     expect(eventLog).to.deep.equal([]);
 
     fireEvent.mouseOver(screen.getByRole('button'));
-    clock.tick(100);
+    await act(async () => {
+      await timer?.tickAsync(100);
+    });
 
     expect(eventLog).to.deep.equal(['mouseover', 'open']);
     setProps({ open: true });
 
     fireEvent.mouseLeave(screen.getByRole('button'));
-    clock.tick(0);
+    await act(async () => {
+      await timer?.tickAsync(0);
+    });
 
     expect(eventLog).to.deep.equal(['mouseover', 'open', 'mouseleave', 'close']);
   });
 
-  it('should not call onOpen again if already open', () => {
+  it('should not call onOpen again if already open', async () => {
     const eventLog = [];
     render(
       <Tooltip enterDelay={100} title="Hello World" onOpen={() => eventLog.push('open')} open>
@@ -359,12 +389,14 @@ describe('<Tooltip />', () => {
     expect(eventLog).to.deep.equal([]);
 
     fireEvent.mouseOver(screen.getByTestId('trigger'));
-    clock.tick(100);
+    await act(async () => {
+      await timer?.tickAsync(100);
+    });
 
     expect(eventLog).to.deep.equal(['mouseover']);
   });
 
-  it('should not call onClose if already closed', () => {
+  it('should not call onClose if already closed', async () => {
     const eventLog = [];
     render(
       <Tooltip title="Hello World" onClose={() => eventLog.push('close')} open={false}>
@@ -373,12 +405,14 @@ describe('<Tooltip />', () => {
     );
 
     fireEvent.mouseLeave(screen.getByTestId('trigger'));
-    clock.tick(0);
+    await act(async () => {
+      await timer?.tickAsync(0);
+    });
 
     expect(eventLog).to.deep.equal(['mouseleave']);
   });
 
-  it('is dismissible by pressing Escape', () => {
+  it('is dismissible by pressing Escape', async () => {
     const handleClose = spy();
     const transitionTimeout = 0;
     render(
@@ -399,7 +433,9 @@ describe('<Tooltip />', () => {
       document.activeElement,
       { key: 'Escape' },
     );
-    clock.tick(transitionTimeout);
+    await act(async () => {
+      await timer?.tickAsync(transitionTimeout);
+    });
 
     expect(handleClose.callCount).to.equal(1);
   });
@@ -435,7 +471,9 @@ describe('<Tooltip />', () => {
         </Tooltip>,
       );
       fireEvent.touchStart(screen.getByRole('button'));
-      clock.tick(enterTouchDelay + enterDelay);
+      await act(async () => {
+        await timer?.tickAsync(enterTouchDelay + enterDelay);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
 
@@ -443,8 +481,12 @@ describe('<Tooltip />', () => {
       await act(async () => {
         screen.getByRole('button').blur();
       });
-      clock.tick(leaveTouchDelay);
-      clock.tick(transitionTimeout);
+      await act(async () => {
+        await timer?.tickAsync(leaveTouchDelay);
+      });
+      await act(async () => {
+        await timer?.tickAsync(transitionTimeout);
+      });
 
       expect(screen.queryByRole('tooltip')).to.equal(null);
     });
@@ -475,7 +517,7 @@ describe('<Tooltip />', () => {
       );
     });
 
-    it('should handle autoFocus + onFocus forwarding', function test() {
+    it('should handle autoFocus + onFocus forwarding', async function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
         // JSDOM doesn't support :focus-visible
         this.skip();
@@ -497,11 +539,14 @@ describe('<Tooltip />', () => {
       const { setProps } = render(
         <AutoFocus />,
         // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076
-        { strictEffects: false },
+        { strict: false, strictEffects: false },
       );
 
       setProps({ open: true });
-      clock.tick(100);
+
+      await act(async () => {
+        await timer?.tickAsync(100);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
       expect(handleFocus.callCount).to.equal(1);
@@ -524,12 +569,15 @@ describe('<Tooltip />', () => {
           </button>
         </Tooltip>,
       );
+
       simulatePointerDevice();
 
-      focusVisible(screen.getByRole('button'));
+      await focusVisible(screen.getByRole('button'));
       expect(queryByRole('tooltip')).to.equal(null);
 
-      clock.tick(111);
+      await act(async () => {
+        await timer?.tickAsync(111);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
     });
@@ -549,28 +597,33 @@ describe('<Tooltip />', () => {
         </Tooltip>,
       );
       const children = screen.getByRole('button');
-      focusVisible(children);
-
+      await focusVisible(children);
       expect(screen.queryByRole('tooltip')).to.equal(null);
 
-      clock.tick(111);
+      await act(async () => {
+        await timer?.tickAsync(111);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
 
       await act(async () => {
         document.activeElement.blur();
       });
-      clock.tick(5);
-      clock.tick(6);
+      await act(async () => {
+        await timer?.tickAsync(5);
+      });
+      await act(async () => {
+        await timer?.tickAsync(6);
+      });
 
       expect(screen.queryByRole('tooltip')).to.equal(null);
 
-      focusVisible(children);
+      await focusVisible(children);
       // Bypass `enterDelay` wait, use `enterNextDelay`.
       expect(screen.queryByRole('tooltip')).to.equal(null);
 
       await act(async () => {
-        clock.tick(30);
+        await timer?.tickAsync(30);
       });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
@@ -594,8 +647,10 @@ describe('<Tooltip />', () => {
       );
       simulatePointerDevice();
 
-      focusVisible(screen.getByRole('button'));
-      clock.tick(enterDelay);
+      await focusVisible(screen.getByRole('button'));
+      await act(async () => {
+        await timer?.tickAsync(enterDelay);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
 
@@ -605,8 +660,12 @@ describe('<Tooltip />', () => {
 
       expect(screen.getByRole('tooltip')).toBeVisible();
 
-      clock.tick(leaveDelay);
-      clock.tick(transitionTimeout);
+      await act(async () => {
+        await timer?.tickAsync(leaveDelay);
+      });
+      await act(async () => {
+        await timer?.tickAsync(transitionTimeout);
+      });
 
       expect(screen.queryByRole('tooltip')).to.equal(null);
     });
@@ -723,7 +782,7 @@ describe('<Tooltip />', () => {
   });
 
   describe('prop: disableInteractive', () => {
-    it('when false should keep the overlay open if the popper element is hovered', () => {
+    it('when false should keep the overlay open if the popper element is hovered', async () => {
       render(
         <Tooltip
           title="Hello World"
@@ -738,7 +797,9 @@ describe('<Tooltip />', () => {
       );
 
       fireEvent.mouseOver(screen.getByRole('button'));
-      clock.tick(100);
+      await act(async () => {
+        await timer?.tickAsync(100);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
 
@@ -747,12 +808,14 @@ describe('<Tooltip />', () => {
       expect(screen.getByRole('tooltip')).toBeVisible();
 
       fireEvent.mouseOver(screen.getByRole('tooltip'));
-      clock.tick(111 + 10);
+      await act(async () => {
+        await timer?.tickAsync(111 + 10);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
     });
 
-    it('when `true` should not keep the overlay open if the popper element is hovered', () => {
+    it('when `true` should not keep the overlay open if the popper element is hovered', async () => {
       render(
         <Tooltip
           title="Hello World"
@@ -767,7 +830,9 @@ describe('<Tooltip />', () => {
       );
 
       fireEvent.mouseOver(screen.getByRole('button'));
-      clock.tick(100);
+      await act(async () => {
+        await timer?.tickAsync(100);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
 
@@ -776,7 +841,9 @@ describe('<Tooltip />', () => {
       expect(screen.getByRole('tooltip')).toBeVisible();
 
       fireEvent.mouseOver(screen.getByRole('tooltip'));
-      clock.tick(111 + 10);
+      await act(async () => {
+        await timer?.tickAsync(111 + 10);
+      });
 
       expect(screen.getByRole('tooltip')).not.toBeVisible();
     });
@@ -991,7 +1058,7 @@ describe('<Tooltip />', () => {
       }
     });
 
-    it('opens on focus-visible', () => {
+    it('opens on focus-visible', async () => {
       const eventLog = [];
       render(
         <Tooltip enterDelay={0} onOpen={() => eventLog.push('open')} title="Some information">
@@ -1002,7 +1069,7 @@ describe('<Tooltip />', () => {
 
       expect(screen.queryByRole('tooltip')).to.equal(null);
 
-      focusVisible(screen.getByRole('button'));
+      await focusVisible(screen.getByRole('button'));
 
       expect(screen.getByRole('tooltip')).toBeVisible();
       expect(eventLog).to.deep.equal(['focus', 'open']);
@@ -1031,7 +1098,9 @@ describe('<Tooltip />', () => {
       await act(async () => {
         button.blur();
       });
-      clock.tick(transitionTimeout);
+      await act(async () => {
+        await timer?.tickAsync(transitionTimeout);
+      });
 
       expect(screen.getByRole('tooltip')).toBeVisible();
       expect(eventLog).to.deep.equal(['blur', 'close']);
@@ -1381,7 +1450,7 @@ describe('<Tooltip />', () => {
       document.body.style.WebkitUserSelect = prevWebkitUserSelect;
     });
 
-    it('prevents text-selection during touch-longpress', () => {
+    it('prevents text-selection during touch-longpress', async () => {
       const enterTouchDelay = 700;
       const enterDelay = 100;
       const leaveTouchDelay = 1500;
@@ -1403,7 +1472,9 @@ describe('<Tooltip />', () => {
 
       expect(document.body.style.WebkitUserSelect).to.equal('none');
 
-      clock.tick(enterTouchDelay + enterDelay);
+      await act(async () => {
+        await timer?.tickAsync(enterTouchDelay + enterDelay);
+      });
       expect(document.body.style.WebkitUserSelect).to.equal('text');
     });
 
diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.test.tsx b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.test.tsx
index dd650690b296ec..59a5fe24e74969 100644
--- a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.test.tsx
+++ b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
+import { SinonFakeTimers, useFakeTimers } from 'sinon';
 import { act, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
 import FocusTrap from '@mui/material/Unstable_TrapFocus';
 import Portal from '@mui/material/Portal';
@@ -10,15 +11,15 @@ interface GenericProps {
 }
 
 describe('<FocusTrap />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   let initialFocus: HTMLElement | null = null;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     initialFocus = document.createElement('button');
     initialFocus.tabIndex = 0;
     document.body.appendChild(initialFocus);
-    act(() => {
+    await act(async () => {
       initialFocus!.focus();
     });
   });
@@ -27,7 +28,7 @@ describe('<FocusTrap />', () => {
     document.body.removeChild(initialFocus!);
   });
 
-  it('should return focus to the root', () => {
+  it('should return focus to the root', async () => {
     const { getByTestId } = render(
       <FocusTrap open>
         <div tabIndex={-1} data-testid="root">
@@ -35,18 +36,18 @@ describe('<FocusTrap />', () => {
         </div>
       </FocusTrap>,
       // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076
-      { strictEffects: false },
+      { strict: false, strictEffects: false },
     );
 
     expect(getByTestId('auto-focus')).toHaveFocus();
 
-    act(() => {
+    await act(async () => {
       initialFocus!.focus();
     });
     expect(getByTestId('root')).toHaveFocus();
   });
 
-  it('should not return focus to the children when disableEnforceFocus is true', () => {
+  it('should not return focus to the children when disableEnforceFocus is true', async () => {
     const { getByTestId } = render(
       <FocusTrap open disableEnforceFocus>
         <div tabIndex={-1}>
@@ -54,12 +55,12 @@ describe('<FocusTrap />', () => {
         </div>
       </FocusTrap>,
       // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076s
-      { strictEffects: false },
+      { strict: false, strictEffects: false },
     );
 
     expect(getByTestId('auto-focus')).toHaveFocus();
 
-    act(() => {
+    await act(async () => {
       initialFocus!.focus();
     });
 
@@ -113,7 +114,7 @@ describe('<FocusTrap />', () => {
     expect(screen.getByTestId('root')).toHaveFocus();
   });
 
-  it('does not steal focus from a portaled element if any prop but open changes', () => {
+  it('does not steal focus from a portaled element if any prop but open changes', async () => {
     function Test(props: GenericProps) {
       return (
         <FocusTrap disableAutoFocus open {...props}>
@@ -125,7 +126,7 @@ describe('<FocusTrap />', () => {
     }
     const { setProps } = render(<Test />);
     const portaledTextbox = screen.getByTestId('portal-input');
-    act(() => {
+    await act(async () => {
       portaledTextbox.focus();
     });
 
@@ -150,7 +151,7 @@ describe('<FocusTrap />', () => {
     expect(portaledTextbox).toHaveFocus();
   });
 
-  it('undesired: lazy root does not get autofocus', () => {
+  it('undesired: lazy root does not get autofocus', async () => {
     let mountDeferredComponent: React.DispatchWithoutAction;
     const DeferredComponent = React.forwardRef<HTMLDivElement>(
       function DeferredComponent(props, ref) {
@@ -172,7 +173,7 @@ describe('<FocusTrap />', () => {
 
     expect(initialFocus).toHaveFocus();
 
-    act(() => {
+    await act(async () => {
       mountDeferredComponent();
     });
 
@@ -198,6 +199,7 @@ describe('<FocusTrap />', () => {
     const { setProps } = render(<Test />, {
       // Strict Effects interferes with the premise of the test.
       // It would trigger a focus restore (i.e. a blur event)
+      strict: false,
       strictEffects: false,
     });
 
@@ -208,7 +210,7 @@ describe('<FocusTrap />', () => {
     expect(eventLog).to.deep.equal([]);
   });
 
-  it('does not focus if isEnabled returns false', () => {
+  it('does not focus if isEnabled returns false', async () => {
     function Test(props: GenericProps) {
       return (
         <div>
@@ -222,14 +224,14 @@ describe('<FocusTrap />', () => {
     const { setProps, getByRole } = render(<Test />, { strict: reactMajor <= 18 });
     expect(screen.getByTestId('root')).toHaveFocus();
 
-    act(() => {
+    await act(async () => {
       getByRole('textbox').focus();
     });
     expect(getByRole('textbox')).not.toHaveFocus();
 
     setProps({ isEnabled: () => false });
 
-    act(() => {
+    await act(async () => {
       getByRole('textbox').focus();
     });
     expect(getByRole('textbox')).toHaveFocus();
@@ -290,9 +292,29 @@ describe('<FocusTrap />', () => {
   });
 
   describe('interval', () => {
-    clock.withFakeTimers();
+    let timer: SinonFakeTimers | null = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
-    it('contains the focus if the active element is removed', () => {
+    it('contains the focus if the active element is removed', async () => {
       function WithRemovableElement({ hideButton = false }) {
         return (
           <FocusTrap open>
@@ -310,19 +332,24 @@ describe('<FocusTrap />', () => {
       const { setProps } = render(<WithRemovableElement />);
 
       expect(screen.getByTestId('root')).toHaveFocus();
-      act(() => {
+      await act(async () => {
         screen.getByTestId('hide-button').focus();
       });
       expect(screen.getByTestId('hide-button')).toHaveFocus();
 
       setProps({ hideButton: true });
       expect(screen.getByTestId('root')).not.toHaveFocus();
-      clock.tick(500); // wait for the interval check to kick in.
+
+      // wait for the interval check to kick in.
+      await act(async () => {
+        await timer?.tickAsync(500);
+      });
+
       expect(screen.getByTestId('root')).toHaveFocus();
     });
 
     describe('prop: disableAutoFocus', () => {
-      it('should not trap', () => {
+      it('should not trap', async () => {
         const { getByRole } = render(
           <div>
             <input />
@@ -332,16 +359,18 @@ describe('<FocusTrap />', () => {
           </div>,
         );
 
-        clock.tick(500); // trigger an interval call
+        await act(async () => {
+          await timer?.tickAsync(500); // trigger an interval call
+        });
         expect(initialFocus).toHaveFocus();
 
-        act(() => {
+        await act(async () => {
           getByRole('textbox').focus();
         });
         expect(getByRole('textbox')).toHaveFocus();
       });
 
-      it('should trap once the focus moves inside', () => {
+      it('should trap once the focus moves inside', async () => {
         render(
           <div>
             <input data-testid="outside-input" />
@@ -355,25 +384,25 @@ describe('<FocusTrap />', () => {
 
         expect(initialFocus).toHaveFocus();
 
-        act(() => {
+        await act(async () => {
           screen.getByTestId('outside-input').focus();
         });
         expect(screen.getByTestId('outside-input')).toHaveFocus();
 
         // the trap activates
-        act(() => {
+        await act(async () => {
           screen.getByTestId('focus-input').focus();
         });
         expect(screen.getByTestId('focus-input')).toHaveFocus();
 
         // the trap prevent to escape
-        act(() => {
+        await act(async () => {
           screen.getByTestId('outside-input').focus();
         });
         expect(screen.getByTestId('root')).toHaveFocus();
       });
 
-      it('should restore the focus', () => {
+      it('should restore the focus', async () => {
         function Test(props: GenericProps) {
           return (
             <div>
@@ -390,13 +419,13 @@ describe('<FocusTrap />', () => {
         const { setProps } = render(<Test />);
 
         // set the expected focus restore location
-        act(() => {
+        await act(async () => {
           screen.getByTestId('outside-input').focus();
         });
         expect(screen.getByTestId('outside-input')).toHaveFocus();
 
         // the trap activates
-        act(() => {
+        await act(async () => {
           screen.getByTestId('root').focus();
         });
         expect(screen.getByTestId('root')).toHaveFocus();
diff --git a/packages/mui-material/src/Zoom/Zoom.test.js b/packages/mui-material/src/Zoom/Zoom.test.js
index 211df55f1b18ae..ef30a14af54875 100644
--- a/packages/mui-material/src/Zoom/Zoom.test.js
+++ b/packages/mui-material/src/Zoom/Zoom.test.js
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createRenderer } from '@mui/internal-test-utils';
+import { spy, useFakeTimers } from 'sinon';
+import { createRenderer, act } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import Zoom from '@mui/material/Zoom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Zoom />', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   describeConformance(
     <Zoom in>
@@ -30,9 +30,30 @@ describe('<Zoom />', () => {
   );
 
   describe('transition lifecycle', () => {
-    clock.withFakeTimers();
+    /** @type {import('sinon').SinonFakeTimers | null} */
+    let timer = null;
+
+    beforeEach(() => {
+      timer = useFakeTimers({
+        shouldClearNativeTimers: true,
+        toFake: [
+          'performance',
+          'setTimeout',
+          'clearTimeout',
+          'setInterval',
+          'clearInterval',
+          'Date',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+        ],
+      });
+    });
+
+    afterEach(() => {
+      timer?.restore();
+    });
 
-    it('tests', () => {
+    it('tests', async () => {
       const handleAddEndListener = spy();
       const handleEnter = spy();
       const handleEntering = spy();
@@ -71,7 +92,9 @@ describe('<Zoom />', () => {
       expect(handleEntering.callCount).to.equal(1);
       expect(handleEntering.args[0][0]).to.equal(child);
 
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
       expect(handleEntered.callCount).to.equal(1);
       expect(handleEntered.args[0][0]).to.equal(child);
 
@@ -87,7 +110,9 @@ describe('<Zoom />', () => {
       expect(handleExiting.callCount).to.equal(1);
       expect(handleExiting.args[0][0]).to.equal(child);
 
-      clock.tick(1000);
+      await act(async () => {
+        await timer?.tickAsync(1000);
+      });
       expect(handleExited.callCount).to.equal(1);
       expect(handleExited.args[0][0]).to.equal(child);
     });
diff --git a/packages/mui-material/src/internal/SwitchBase.test.js b/packages/mui-material/src/internal/SwitchBase.test.js
index 303e49bac1b679..caa7fdd9cc58d7 100644
--- a/packages/mui-material/src/internal/SwitchBase.test.js
+++ b/packages/mui-material/src/internal/SwitchBase.test.js
@@ -166,7 +166,7 @@ describe('<SwitchBase />', () => {
     });
   });
 
-  it('can change checked state uncontrolled starting from defaultChecked', () => {
+  it('can change checked state uncontrolled starting from defaultChecked', async () => {
     const { container, getByRole, getByTestId } = render(
       <SwitchBase
         icon={<span data-testid="unchecked-icon" />}
@@ -181,7 +181,7 @@ describe('<SwitchBase />', () => {
     expect(checkbox).to.have.property('checked', true);
     expect(getByTestId('checked-icon')).not.to.equal(null);
 
-    act(() => {
+    await act(async () => {
       checkbox.click();
     });
 
@@ -189,7 +189,7 @@ describe('<SwitchBase />', () => {
     expect(checkbox).to.have.property('checked', false);
     expect(getByTestId('unchecked-icon')).not.to.equal(null);
 
-    act(() => {
+    await act(async () => {
       checkbox.click();
     });
 
@@ -199,7 +199,7 @@ describe('<SwitchBase />', () => {
   });
 
   describe('handleInputChange()', () => {
-    it('should call onChange when uncontrolled', () => {
+    it('should call onChange when uncontrolled', async () => {
       const handleChange = spy();
       const { getByRole } = render(
         <SwitchBase
@@ -210,7 +210,7 @@ describe('<SwitchBase />', () => {
         />,
       );
 
-      act(() => {
+      await act(async () => {
         getByRole('checkbox').click();
       });
 
@@ -218,7 +218,7 @@ describe('<SwitchBase />', () => {
       expect(handleChange.firstCall.args[0].target).to.have.property('checked', true);
     });
 
-    it('should call onChange when controlled', () => {
+    it('should call onChange when controlled', async () => {
       const defaultChecked = true;
       function ControlledSwichBase() {
         const [checked, setChecked] = React.useState(defaultChecked);
@@ -237,14 +237,14 @@ describe('<SwitchBase />', () => {
       const { getByRole } = render(<ControlledSwichBase />);
       const checkbox = getByRole('checkbox');
 
-      act(() => {
+      await act(async () => {
         checkbox.click();
       });
 
       expect(checkbox).to.have.property('checked', !defaultChecked);
     });
 
-    it('should not change checkbox state when event is default prevented', () => {
+    it('should not change checkbox state when event is default prevented', async () => {
       const handleChange = spy();
       const handleClick = spy((event) => event.preventDefault());
       const { container, getByRole } = render(
@@ -262,7 +262,7 @@ describe('<SwitchBase />', () => {
       expect(container.firstChild).to.have.class(classes.checked);
       expect(checkbox).to.have.property('checked', true);
 
-      act(() => {
+      await act(async () => {
         checkbox.click();
       });
 
@@ -369,7 +369,7 @@ describe('<SwitchBase />', () => {
   });
 
   describe('focus/blur', () => {
-    it('forwards focus/blur events and notifies the FormControl', () => {
+    it('forwards focus/blur events and notifies the FormControl', async () => {
       function FocusMonitor(props) {
         const { focused } = useFormControl();
 
@@ -391,14 +391,14 @@ describe('<SwitchBase />', () => {
       );
       const checkbox = getByRole('checkbox');
 
-      act(() => {
+      await act(async () => {
         checkbox.focus();
       });
 
       expect(getByTestId('focus-monitor')).to.have.text('focused: true');
       expect(handleFocus.callCount).to.equal(1);
 
-      act(() => {
+      await act(async () => {
         checkbox.blur();
       });
 
@@ -480,7 +480,7 @@ describe('<SwitchBase />', () => {
     });
   });
 
-  it('should call event handlers in slotProps when provided', () => {
+  it('should call event handlers in slotProps when provided', async () => {
     const rootOnClick = spy();
     const inputOnClick = spy();
     const { getByRole } = render(
@@ -499,7 +499,7 @@ describe('<SwitchBase />', () => {
       />,
     );
 
-    act(() => {
+    await act(async () => {
       getByRole('checkbox').click();
     });
 
diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
index 81b9468b90d694..c446d95241dcd4 100644
--- a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
@@ -303,6 +303,7 @@ describe('useAutocomplete', () => {
         aboveErrorUlElementMessage,
         aboveErrorTestComponentMessage,
       ],
+
       18: [
         nodeErrorMessage,
         muiErrorMessage,
@@ -313,6 +314,7 @@ describe('useAutocomplete', () => {
         aboveErrorTestComponentMessage,
         aboveErrorTestComponentMessage,
       ],
+
       19: [
         muiErrorMessage,
         muiErrorMessage,
@@ -335,7 +337,7 @@ describe('useAutocomplete', () => {
   });
 
   describe('prop: freeSolo', () => {
-    it('should not reset if the component value does not change on blur', () => {
+    it('should not reset if the component value does not change on blur', async () => {
       function Test(props) {
         const { options } = props;
         const { getInputProps } = useAutocomplete({ options, open: true, freeSolo: true });
@@ -345,7 +347,7 @@ describe('useAutocomplete', () => {
       render(<Test options={['foo', 'bar']} />);
       const input = screen.getByRole('combobox');
 
-      act(() => {
+      await act(async () => {
         fireEvent.change(input, { target: { value: 'free' } });
         input.blur();
       });
diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
index fceb9a8e08df8e..aa18e38ded311e 100644
--- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
+++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
@@ -102,8 +102,8 @@ describe('useScrollTrigger', () => {
       }
     });
 
-    function dispatchScroll(offset, element = window) {
-      act(() => {
+    async function dispatchScroll(offset, element = window) {
+      await act(async () => {
         element.pageYOffset = offset;
         element.dispatchEvent(new window.Event('scroll', {}));
       });
@@ -114,23 +114,26 @@ describe('useScrollTrigger', () => {
       expect(container.textContent).to.include('Custom container');
     });
 
-    it('should not trigger from window scroll events with ref', () => {
+    it('should not trigger from window scroll events with ref', async () => {
       render(<Test customContainer />);
-      [101, 200, 300, -10, 100, 101, 99, 200, 199, 0, 1, -1, 150].forEach((offset, i) => {
-        dispatchScroll(offset);
+      for (const [i, offset] of [
+        101, 200, 300, -10, 100, 101, 99, 200, 199, 0, 1, -1, 150,
+      ].entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await dispatchScroll(offset);
         expect(getTriggerValue()).to.equal('false', `Index: ${i} Offset: ${offset}`);
-      });
+      }
     });
 
-    it('should trigger above default threshold with ref', () => {
+    it('should trigger above default threshold with ref', async () => {
       render(<Test customContainer />);
-      dispatchScroll(300, getContainer());
+      await dispatchScroll(300, getContainer());
       expect(getTriggerValue()).to.equal('true');
     });
 
-    it('should have correct hysteresis triggering threshold with ref', () => {
+    it('should have correct hysteresis triggering threshold with ref', async () => {
       render(<Test customContainer />);
-      [
+      for (const [index, test] of [
         { offset: 100, result: 'false' },
         { offset: 101, result: 'true' },
         { offset: 100, result: 'false' },
@@ -148,15 +151,16 @@ describe('useScrollTrigger', () => {
         { offset: 3, result: 'false' },
         { offset: 103, result: 'true' },
         { offset: 102, result: 'false' },
-      ].forEach((test, index) => {
-        dispatchScroll(test.offset, getContainer());
+      ].entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await dispatchScroll(test.offset, getContainer());
         expect(getTriggerValue()).to.equal(test.result, `Index: ${index} ${JSON.stringify(test)}`);
-      });
+      }
     });
 
-    it('should have correct hysteresis triggering with default threshold with ref', () => {
+    it('should have correct hysteresis triggering with default threshold with ref', async () => {
       render(<Test customContainer disableHysteresis />);
-      [
+      for (const [index, test] of [
         { offset: 100, result: 'false' },
         { offset: 101, result: 'true' },
         { offset: 200, result: 'true' },
@@ -173,15 +177,16 @@ describe('useScrollTrigger', () => {
         { offset: -3, result: 'false' },
         { offset: 3, result: 'false' },
         { offset: 103, result: 'true' },
-      ].forEach((test, index) => {
-        dispatchScroll(test.offset, getContainer());
+      ].entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await dispatchScroll(test.offset, getContainer());
         expect(getTriggerValue()).to.equal(test.result, `Index: ${index} ${JSON.stringify(test)}`);
-      });
+      }
     });
 
-    it('should have correct hysteresis triggering with custom threshold with ref', () => {
+    it('should have correct hysteresis triggering with custom threshold with ref', async () => {
       render(<Test customContainer disableHysteresis threshold={50} />);
-      [
+      for (const [index, test] of [
         { offset: 100, result: 'true' },
         { offset: 101, result: 'true' },
         { offset: 101, result: 'true' },
@@ -196,15 +201,16 @@ describe('useScrollTrigger', () => {
         { offset: -50, result: 'false' },
         { offset: 50, result: 'false' },
         { offset: 51, result: 'true' },
-      ].forEach((test, index) => {
-        dispatchScroll(test.offset, getContainer());
+      ].entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await dispatchScroll(test.offset, getContainer());
         expect(getTriggerValue()).to.equal(test.result, `Index: ${index} ${JSON.stringify(test)}`);
-      });
+      }
     });
 
-    it('should not trigger at exact threshold value with ref', () => {
+    it('should not trigger at exact threshold value with ref', async () => {
       render(<Test customContainer threshold={100} />);
-      [
+      for (const [index, test] of [
         { offset: 100, result: 'false' },
         { offset: 99, result: 'false' },
         { offset: 100, result: 'false' },
@@ -212,30 +218,32 @@ describe('useScrollTrigger', () => {
         { offset: 100, result: 'false' },
         { offset: 99, result: 'false' },
         { offset: 100, result: 'false' },
-      ].forEach((test, index) => {
-        dispatchScroll(test.offset, getContainer());
+      ].entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await dispatchScroll(test.offset, getContainer());
         expect(getTriggerValue()).to.equal(test.result, `Index: ${index} ${JSON.stringify(test)}`);
-      });
+      }
     });
 
-    it('should not trigger at exact threshold value with hysteresis disabled with ref', () => {
+    it('should not trigger at exact threshold value with hysteresis disabled with ref', async () => {
       render(<Test customContainer disableHysteresis threshold={100} />);
-      [
+      for (const [index, test] of [
         { offset: 100, result: 'false' },
         { offset: 99, result: 'false' },
         { offset: 100, result: 'false' },
         { offset: 101, result: 'true' },
         { offset: 100, result: 'false' },
         { offset: 99, result: 'false' },
-      ].forEach((test, index) => {
-        dispatchScroll(test.offset, getContainer());
+      ].entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await dispatchScroll(test.offset, getContainer());
         expect(getTriggerValue()).to.equal(test.result, `Index: ${index} ${JSON.stringify(test)}`);
-      });
+      }
     });
 
-    it('should correctly evaluate sequential scroll events with identical scrollY offsets with ref', () => {
+    it('should correctly evaluate sequential scroll events with identical scrollY offsets with ref', async () => {
       render(<Test customContainer threshold={199} />);
-      [
+      for (const [index, test] of [
         { offset: 200, result: 'true' },
         { offset: 200, result: 'true' },
         { offset: 200, result: 'true' },
@@ -244,15 +252,16 @@ describe('useScrollTrigger', () => {
         { offset: 199, result: 'false' },
         { offset: 200, result: 'true' },
         { offset: 200, result: 'true' },
-      ].forEach((test, index) => {
-        dispatchScroll(test.offset, getContainer());
+      ].entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await dispatchScroll(test.offset, getContainer());
         expect(getTriggerValue()).to.equal(test.result, `Index: ${index} ${JSON.stringify(test)}`);
-      });
+      }
     });
 
-    it('should correctly evaluate sequential scroll events with identical scrollY offsets and hysteresis disabled with ref', () => {
+    it('should correctly evaluate sequential scroll events with identical scrollY offsets and hysteresis disabled with ref', async () => {
       render(<Test customContainer disableHysteresis threshold={199} />);
-      [
+      for (const [index, test] of [
         { offset: 200, result: 'true' },
         { offset: 200, result: 'true' },
         { offset: 200, result: 'true' },
@@ -261,21 +270,22 @@ describe('useScrollTrigger', () => {
         { offset: 199, result: 'false' },
         { offset: 200, result: 'true' },
         { offset: 200, result: 'true' },
-      ].forEach((test, index) => {
-        dispatchScroll(test.offset, getContainer());
+      ].entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await dispatchScroll(test.offset, getContainer());
         expect(getTriggerValue()).to.equal(test.result, `Index: ${index} ${JSON.stringify(test)}`);
-      });
+      }
     });
 
     it('should correctly evaluate scroll events on page first load', () => {
-      [
+      for (const [index, test] of [
         { offset: 101, result: 'true' },
         { offset: 100, result: 'false' },
-      ].forEach((test, index) => {
+      ].entries()) {
         window.pageYOffset = test.offset;
         render(<Test threshold={100} />);
         expect(getTriggerValue()).to.equal(test.result, `Index: ${index} ${JSON.stringify(test)}`);
-      });
+      }
     });
   });
 });
diff --git a/packages/mui-material/test/integration/Menu.test.js b/packages/mui-material/test/integration/Menu.test.js
index e27eff1e2fd37b..9899a430af0ca1 100644
--- a/packages/mui-material/test/integration/Menu.test.js
+++ b/packages/mui-material/test/integration/Menu.test.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import { useFakeTimers } from 'sinon';
 import Button from '@mui/material/Button';
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
@@ -69,22 +70,45 @@ function ButtonMenu(props) {
 ButtonMenu.propTypes = { selectedIndex: PropTypes.number };
 
 describe('<Menu /> integration', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
 
-  it('is part of the DOM by default but hidden', () => {
-    const { getByRole } = render(<ButtonMenu />);
+  const { render } = createRenderer();
+
+  it('is part of the DOM by default but hidden', async () => {
+    const { getByRole } = await render(<ButtonMenu />);
 
     expect(getByRole('menu', { hidden: true })).toBeInaccessible();
   });
 
-  it('does not gain any focus when mounted ', () => {
-    const { getByRole } = render(<ButtonMenu />);
+  it('does not gain any focus when mounted ', async () => {
+    const { getByRole } = await render(<ButtonMenu />);
 
     expect(getByRole('menu', { hidden: true })).not.to.contain(document.activeElement);
   });
 
   it('should focus the first item on open', async () => {
-    const { getByRole, getAllByRole } = render(<ButtonMenu />);
+    const { getByRole, getAllByRole } = await render(<ButtonMenu />);
 
     const button = getByRole('button', { name: 'open menu' });
     await act(async () => {
@@ -96,7 +120,7 @@ describe('<Menu /> integration', () => {
   });
 
   it('changes focus according to keyboard navigation', async () => {
-    const { getAllByRole, getByRole } = render(<ButtonMenu />);
+    const { getAllByRole, getByRole } = await render(<ButtonMenu />);
 
     const button = getByRole('button', { name: 'open menu' });
     await act(async () => {
@@ -125,7 +149,7 @@ describe('<Menu /> integration', () => {
   });
 
   it('focuses the selected item when opening', async () => {
-    const { getAllByRole, getByRole } = render(<ButtonMenu selectedIndex={2} />);
+    const { getAllByRole, getByRole } = await render(<ButtonMenu selectedIndex={2} />);
 
     const button = getByRole('button', { name: 'open menu' });
     await act(async () => {
@@ -141,8 +165,8 @@ describe('<Menu /> integration', () => {
       return <Menu anchorEl={document.body} open {...props} />;
     }
 
-    specify('[variant=menu] will focus the first item if nothing is selected', () => {
-      const { getAllByRole } = render(
+    specify('[variant=menu] will focus the first item if nothing is selected', async () => {
+      const { getAllByRole } = await render(
         <OpenMenu variant="menu">
           <MenuItem />
           <MenuItem />
@@ -157,8 +181,8 @@ describe('<Menu /> integration', () => {
       expect(menuitems[2]).to.have.property('tabIndex', -1);
     });
 
-    specify('[variant=selectedMenu] will focus the first item if nothing is selected', () => {
-      const { getAllByRole } = render(
+    specify('[variant=selectedMenu] will focus the first item if nothing is selected', async () => {
+      const { getAllByRole } = await render(
         <OpenMenu variant="selectedMenu">
           <MenuItem />
           <MenuItem />
@@ -174,8 +198,8 @@ describe('<Menu /> integration', () => {
     });
 
     // no case for variant=selectedMenu
-    specify('[variant=menu] prioritizes `autoFocus` on `MenuItem`', () => {
-      const { getAllByRole } = render(
+    specify('[variant=menu] prioritizes `autoFocus` on `MenuItem`', async () => {
+      const { getAllByRole } = await render(
         <OpenMenu variant="menu">
           <MenuItem />
           <MenuItem />
@@ -190,8 +214,8 @@ describe('<Menu /> integration', () => {
       expect(menuitems[2]).to.have.property('tabIndex', -1);
     });
 
-    specify('[variant=menu] ignores `selected` on `MenuItem`', () => {
-      const { getAllByRole } = render(
+    specify('[variant=menu] ignores `selected` on `MenuItem`', async () => {
+      const { getAllByRole } = await render(
         <OpenMenu variant="menu">
           <MenuItem />
           <MenuItem selected />
@@ -206,8 +230,8 @@ describe('<Menu /> integration', () => {
       expect(menuitems[2]).to.have.property('tabIndex', -1);
     });
 
-    specify('[variant=selectedMenu] focuses the `selected` `MenuItem`', () => {
-      const { getAllByRole } = render(
+    specify('[variant=selectedMenu] focuses the `selected` `MenuItem`', async () => {
+      const { getAllByRole } = await render(
         <OpenMenu variant="selectedMenu">
           <MenuItem />
           <MenuItem selected />
@@ -222,8 +246,8 @@ describe('<Menu /> integration', () => {
       expect(menuitems[2]).to.have.property('tabIndex', -1);
     });
 
-    specify('[variant=selectedMenu] allows overriding `tabIndex` on `MenuItem`', () => {
-      const { getAllByRole } = render(
+    specify('[variant=selectedMenu] allows overriding `tabIndex` on `MenuItem`', async () => {
+      const { getAllByRole } = await render(
         <OpenMenu variant="selectedMenu">
           <MenuItem />
           <MenuItem selected tabIndex={2} />
@@ -243,8 +267,8 @@ describe('<Menu /> integration', () => {
     // it's debatable whether disabled items should still be focusable
     specify(
       '[variant=selectedMenu] focuses the first non-disabled item if the selected menuitem is disabled',
-      () => {
-        const { getAllByRole } = render(
+      async () => {
+        const { getAllByRole } = await render(
           <OpenMenu variant="selectedMenu">
             <MenuItem disabled />
             <MenuItem />
@@ -265,24 +289,31 @@ describe('<Menu /> integration', () => {
     // no case for menu
     // TODO: should this even change focus? I would guess that autoFocus={false}
     // means "developer: I take care of focus don't steal it from me"
-    specify('[variant=selectedMenu] focuses no part of the menu when `autoFocus={false}`', () => {
-      const { getAllByRole, getByTestId } = render(
-        <OpenMenu autoFocus={false} variant="selectedMenu" PaperProps={{ 'data-testid': 'Paper' }}>
-          <MenuItem />
-          <MenuItem selected />
-          <MenuItem />
-        </OpenMenu>,
-      );
-      const menuitems = getAllByRole('menuitem');
+    specify(
+      '[variant=selectedMenu] focuses no part of the menu when `autoFocus={false}`',
+      async () => {
+        const { getAllByRole, getByTestId } = await render(
+          <OpenMenu
+            autoFocus={false}
+            variant="selectedMenu"
+            PaperProps={{ 'data-testid': 'Paper' }}
+          >
+            <MenuItem />
+            <MenuItem selected />
+            <MenuItem />
+          </OpenMenu>,
+        );
+        const menuitems = getAllByRole('menuitem');
 
-      expect(getByTestId('Paper')).toHaveFocus();
-      expect(menuitems[0]).to.have.property('tabIndex', -1);
-      expect(menuitems[1]).to.have.property('tabIndex', 0);
-      expect(menuitems[2]).to.have.property('tabIndex', -1);
-    });
+        expect(getByTestId('Paper')).toHaveFocus();
+        expect(menuitems[0]).to.have.property('tabIndex', -1);
+        expect(menuitems[1]).to.have.property('tabIndex', 0);
+        expect(menuitems[2]).to.have.property('tabIndex', -1);
+      },
+    );
 
-    specify('[variant=selectedMenu] focuses nothing when it is closed and mounted', () => {
-      const { getByRole } = render(<ButtonMenu selectedIndex={1} variant="selectedMenu" />);
+    specify('[variant=selectedMenu] focuses nothing when it is closed and mounted', async () => {
+      const { getByRole } = await render(<ButtonMenu selectedIndex={1} variant="selectedMenu" />);
 
       expect(getByRole('menu', { hidden: true })).not.to.contain(document.activeElement);
     });
@@ -290,7 +321,7 @@ describe('<Menu /> integration', () => {
     specify(
       '[variant=selectedMenu] focuses the selected item when opening when it was already mounted',
       async () => {
-        const { getAllByRole, getByRole } = render(
+        const { getAllByRole, getByRole } = await render(
           <ButtonMenu selectedIndex={1} variant="selectedMenu" />,
         );
 
@@ -309,7 +340,7 @@ describe('<Menu /> integration', () => {
   });
 
   it('closes the menu when Tabbing while the list is active', async () => {
-    render(<ButtonMenu />);
+    await render(<ButtonMenu />);
 
     const trigger = screen.getByRole('button');
     await act(async () => {
@@ -319,13 +350,15 @@ describe('<Menu /> integration', () => {
 
     // react-transition-group uses one commit per state transition so we need to wait a bit
     fireEvent.keyDown(screen.getAllByRole('menuitem')[0], { key: 'Tab' });
-    clock.tick(0);
+    await act(async () => {
+      await timer?.tickAsync(0);
+    });
 
     expect(screen.getByRole('menu', { hidden: true })).toBeInaccessible();
   });
 
   it('closes the menu when the backdrop is clicked', async () => {
-    const { getByRole, getByTestId } = render(<ButtonMenu />);
+    const { getByRole, getByTestId } = await render(<ButtonMenu />);
     const button = getByRole('button');
     await act(async () => {
       button.focus();
diff --git a/packages/mui-material/test/integration/MenuList.test.js b/packages/mui-material/test/integration/MenuList.test.js
index 957b23c2fe8a2e..68c2fd72786665 100644
--- a/packages/mui-material/test/integration/MenuList.test.js
+++ b/packages/mui-material/test/integration/MenuList.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import {
   act,
   createRenderer,
@@ -13,7 +13,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
 
 describe('<MenuList> integration', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
 
   specify('the MenuItems have the `menuitem` role', () => {
     const { getAllByRole } = render(
@@ -110,7 +110,7 @@ describe('<MenuList> integration', () => {
       expect(menuitems[2]).to.have.property('tabIndex', -1);
     });
 
-    it('should leave tabIndex on the first item after blur', () => {
+    it('should leave tabIndex on the first item after blur', async () => {
       const handleBlur = spy();
       const { getAllByRole } = render(
         <MenuList autoFocusItem onBlur={handleBlur}>
@@ -122,7 +122,7 @@ describe('<MenuList> integration', () => {
 
       expect(document.activeElement).not.to.equal(null);
 
-      act(() => {
+      await act(async () => {
         document.activeElement.blur();
       });
 
@@ -136,7 +136,7 @@ describe('<MenuList> integration', () => {
       expect(menuitems[2]).not.toHaveFocus();
     });
 
-    it('can imperatively focus the first item', () => {
+    it('can imperatively focus the first item', async () => {
       const { getAllByRole } = render(
         <MenuList autoFocusItem>
           <MenuItem selected>Menu Item 1</MenuItem>
@@ -146,7 +146,7 @@ describe('<MenuList> integration', () => {
       );
       const menuitems = getAllByRole('menuitem');
 
-      act(() => {
+      await act(async () => {
         menuitems[0].focus();
       });
 
@@ -471,7 +471,7 @@ describe('<MenuList> integration', () => {
       innerTextSupported = element.innerText !== undefined;
     });
 
-    it('selects the first item starting with the character', () => {
+    it('selects the first item starting with the character', async () => {
       const { getByRole, getByText } = render(
         <MenuList>
           <MenuItem>Arizona</MenuItem>
@@ -479,7 +479,7 @@ describe('<MenuList> integration', () => {
         </MenuList>,
       );
       const menu = getByRole('menu');
-      act(() => {
+      await act(async () => {
         menu.focus();
       });
 
@@ -488,7 +488,7 @@ describe('<MenuList> integration', () => {
       expect(getByText('Arizona')).toHaveFocus();
     });
 
-    it('should cycle through items when repeating initial character', () => {
+    it('should cycle through items when repeating initial character', async () => {
       const { getAllByRole, getByText } = render(
         <MenuList>
           <MenuItem>Arizona</MenuItem>
@@ -498,7 +498,7 @@ describe('<MenuList> integration', () => {
         </MenuList>,
       );
       const menuitems = getAllByRole('menuitem');
-      act(() => {
+      await act(async () => {
         menuitems[0].focus();
       });
 
@@ -512,14 +512,14 @@ describe('<MenuList> integration', () => {
       expect(getByText('aardvark')).toHaveFocus();
     });
 
-    it('selects the next item starting with the typed character', () => {
+    it('selects the next item starting with the typed character', async () => {
       const { getByText } = render(
         <MenuList>
           <MenuItem>Arizona</MenuItem>
           <MenuItem>Arcansas</MenuItem>
         </MenuList>,
       );
-      act(() => {
+      await act(async () => {
         getByText('Arizona').focus();
       });
 
@@ -582,7 +582,7 @@ describe('<MenuList> integration', () => {
       expect(getByText('Arizona')).toHaveFocus();
     });
 
-    it("should not move focus if focus starts on descendant and the key doesn't match", () => {
+    it("should not move focus if focus starts on descendant and the key doesn't match", async () => {
       const { getByText } = render(
         <MenuList>
           <MenuItem>Arizona</MenuItem>
@@ -592,7 +592,7 @@ describe('<MenuList> integration', () => {
         </MenuList>,
       );
       const button = getByText('Focusable Descendant');
-      act(() => {
+      await act(async () => {
         button.focus();
       });
 
@@ -617,9 +617,30 @@ describe('<MenuList> integration', () => {
     });
 
     describe('time', () => {
-      clock.withFakeTimers();
+      /** @type {import('sinon').SinonFakeTimers | null} */
+      let timer = null;
+
+      beforeEach(() => {
+        timer = useFakeTimers({
+          shouldClearNativeTimers: true,
+          toFake: [
+            'performance',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'Date',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+          ],
+        });
+      });
+
+      afterEach(() => {
+        timer?.restore();
+      });
 
-      it('should reset the character buffer after 500ms', () => {
+      it('should reset the character buffer after 500ms', async () => {
         render(
           <MenuList autoFocus>
             <MenuItem>Worm</MenuItem>
@@ -628,7 +649,11 @@ describe('<MenuList> integration', () => {
         );
 
         fireEvent.keyDown(screen.getByRole('menu'), { key: 'W' });
-        clock.tick(501);
+
+        await act(async () => {
+          await timer?.tickAsync(501);
+        });
+
         fireEvent.keyDown(screen.getByText('Worm'), { key: 'o' });
         expect(screen.getByText('Ordinary')).toHaveFocus();
       });
diff --git a/packages/mui-material/test/integration/Select.test.js b/packages/mui-material/test/integration/Select.test.js
index 356e115806624b..78f0e44b1389e1 100644
--- a/packages/mui-material/test/integration/Select.test.js
+++ b/packages/mui-material/test/integration/Select.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
+import { useFakeTimers } from 'sinon';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import Dialog from '@mui/material/Dialog';
@@ -8,7 +9,30 @@ import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 
 describe('<Select> integration', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  /** @type {import('sinon').SinonFakeTimers | null} */
+  let timer = null;
+
+  beforeEach(() => {
+    timer = useFakeTimers({
+      shouldClearNativeTimers: true,
+      toFake: [
+        'performance',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'Date',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+  });
+
+  afterEach(() => {
+    timer?.restore();
+  });
+
+  const { render } = createRenderer();
 
   describe('with Dialog', () => {
     function SelectAndDialog() {
@@ -38,7 +62,7 @@ describe('<Select> integration', () => {
       );
     }
 
-    it('should focus the selected item', () => {
+    it('should focus the selected item', async () => {
       const { getByTestId, getAllByRole, getByRole, queryByRole } = render(<SelectAndDialog />);
 
       const trigger = getByRole('combobox');
@@ -50,16 +74,16 @@ describe('<Select> integration', () => {
       expect(options[1]).toHaveFocus();
 
       // Now, let's close the select component
-      act(() => {
+      await act(async () => {
         getByTestId('select-backdrop').click();
+        await timer?.tickAsync(0);
       });
-      clock.tick(0);
 
       expect(queryByRole('listbox')).to.equal(null);
       expect(trigger).toHaveFocus();
     });
 
-    it('should be able to change the selected item', () => {
+    it('should be able to change the selected item', async () => {
       const { getAllByRole, getByRole, queryByRole } = render(<SelectAndDialog />);
 
       const trigger = getByRole('combobox');
@@ -72,10 +96,10 @@ describe('<Select> integration', () => {
       expect(options[1]).toHaveFocus();
 
       // Now, let's close the select component
-      act(() => {
+      await act(async () => {
         options[2].click();
+        await timer?.tickAsync(0);
       });
-      clock.tick(0);
 
       expect(queryByRole('listbox')).to.equal(null);
       expect(trigger).toHaveFocus();
@@ -102,7 +126,7 @@ describe('<Select> integration', () => {
     // displaying it as "active". WAI-ARIA authoring practices do not consider the
     // the trigger part of the widget while a native <select /> will outline the trigger
     // as well
-    it('is displayed as focused while open', () => {
+    it('is displayed as focused while open', async () => {
       const { getByTestId, getByRole } = render(
         <FormControl>
           <InputLabel classes={{ focused: 'focused-label' }} data-testid="label">
@@ -121,16 +145,18 @@ describe('<Select> integration', () => {
       );
 
       const trigger = getByRole('combobox');
-      act(() => {
+      await act(async () => {
         trigger.focus();
       });
       fireEvent.keyDown(trigger, { key: 'Enter' });
-      clock.tick(0);
+      await act(async () => {
+        await timer?.tickAsync(0);
+      });
 
       expect(getByTestId('label')).to.have.class('focused-label');
     });
 
-    it('does not stays in an active state if an open action did not actually open', () => {
+    it('does not stays in an active state if an open action did not actually open', async () => {
       // test for https://github.com/mui/material-ui/issues/17294
       // we used to set a flag to stop blur propagation when we wanted to open the
       // select but never considered what happened if the select never opened
@@ -147,7 +173,7 @@ describe('<Select> integration', () => {
       );
       const trigger = getByRole('combobox');
 
-      act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
@@ -157,7 +183,7 @@ describe('<Select> integration', () => {
 
       expect(container.querySelector('[for="age-simple"]')).to.have.class('focused-label');
 
-      act(() => {
+      await act(async () => {
         trigger.blur();
       });
 
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
index 9c699b7f1ff7ee..dd681b91edd7f4 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
+import { spy, useFakeTimers } from 'sinon';
+import { createRenderer, screen, fireEvent, act } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/system';
 import createCssVarsTheme from './createCssVarsTheme';
 import createCssVarsProvider, { DISABLE_CSS_TRANSITION } from './createCssVarsProvider';
@@ -12,7 +12,7 @@ import {
 import useTheme from '../useTheme';
 
 describe('createCssVarsProvider', () => {
-  const { clock, render } = createRenderer();
+  const { render } = createRenderer();
   let originalMatchmedia;
   let storage = {};
   const createMatchMedia = (matches) => () => ({
@@ -245,13 +245,34 @@ describe('createCssVarsProvider', () => {
     });
 
     describe('[option]: `disableTransitionOnChange`', () => {
-      clock.withFakeTimers();
+      /** @type {import('sinon').SinonFakeTimers | null} */
+      let timer = null;
+
+      beforeEach(() => {
+        timer = useFakeTimers({
+          shouldClearNativeTimers: true,
+          toFake: [
+            'performance',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'Date',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+          ],
+        });
+      });
+
+      afterEach(() => {
+        timer?.restore();
+      });
 
       beforeEach(() => {
         document.head.replaceChildren([]);
       });
 
-      it('disable all css transitions when switching between modes, given `disableTransitionOnChange` is true', () => {
+      it('disable all css transitions when switching between modes, given `disableTransitionOnChange` is true', async () => {
         const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
           theme: createCssVarsTheme({
             colorSchemes: { light: {}, dark: {} },
@@ -276,7 +297,9 @@ describe('createCssVarsProvider', () => {
             <Consumer />
           </CssVarsProvider>,
         );
-        clock.runToLast();
+        await act(async () => {
+          await timer?.runToLastAsync();
+        });
         expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal(
           DISABLE_CSS_TRANSITION,
         );
@@ -286,13 +309,15 @@ describe('createCssVarsProvider', () => {
         );
         expect(screen.getByTestId('current-mode').textContent).to.equal('dark');
 
-        clock.runToLast();
+        await act(async () => {
+          await timer?.runToLastAsync();
+        });
         expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal(
           DISABLE_CSS_TRANSITION,
         );
       });
 
-      it('disable all css transitions when switching between color schemes, given `disableTransitionOnChange` is true', () => {
+      it('disable all css transitions when switching between color schemes, given `disableTransitionOnChange` is true', async () => {
         const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
           theme: createCssVarsTheme({
             colorSchemes: { light: {}, dark: {} },
@@ -317,7 +342,9 @@ describe('createCssVarsProvider', () => {
             <Consumer />
           </CssVarsProvider>,
         );
-        clock.runToLast();
+        await act(async () => {
+          await timer?.runToLastAsync();
+        });
         expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal(
           DISABLE_CSS_TRANSITION,
         );
@@ -327,7 +354,9 @@ describe('createCssVarsProvider', () => {
         );
         expect(screen.getByTestId('current-color-scheme').textContent).to.equal('dark');
 
-        clock.runToLast();
+        await act(async () => {
+          await timer?.runToLastAsync();
+        });
         expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal(
           DISABLE_CSS_TRANSITION,
         );
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
index ea19ec237ec3ee..779910c7d32c4e 100644
--- a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
@@ -215,7 +215,7 @@ describe('useCurrentColorScheme', () => {
       });
     });
 
-    it('defaultMode=`system`', () => {
+    it('defaultMode=`system`', async () => {
       function Data() {
         const data = useCurrentColorScheme({
           defaultMode: 'system',
@@ -235,7 +235,7 @@ describe('useCurrentColorScheme', () => {
         colorScheme: 'light',
       });
 
-      act(() => {
+      await act(async () => {
         trigger({ matches: true }); // system matches 'prefers-color-scheme: dark'
       });
 
@@ -366,7 +366,7 @@ describe('useCurrentColorScheme', () => {
       });
     });
 
-    it('change both light & dark color scheme at the same time', () => {
+    it('change both light & dark color scheme at the same time', async () => {
       function Data() {
         const { setColorScheme, ...data } = useCurrentColorScheme({
           defaultMode: 'system',
@@ -392,7 +392,7 @@ describe('useCurrentColorScheme', () => {
         colorScheme: 'paper',
       });
 
-      act(() => {
+      await act(async () => {
         trigger({ matches: true }); // system matches 'prefers-color-scheme: dark'
       });
 
@@ -515,6 +515,7 @@ describe('useCurrentColorScheme', () => {
               data-testid="dark"
               onClick={() => setColorScheme({ light: 'light-dim', dark: 'dark-dim' })}
             />
+
             <button
               data-testid="reset"
               onClick={() => setColorScheme({ light: null, dark: null })}
@@ -636,7 +637,7 @@ describe('useCurrentColorScheme', () => {
       });
     });
 
-    it('storage mode changes from `light` to `dark`', () => {
+    it('storage mode changes from `light` to `dark`', async () => {
       function Data() {
         const { ...data } = useCurrentColorScheme({
           defaultLightColorScheme: 'light',
@@ -647,7 +648,7 @@ describe('useCurrentColorScheme', () => {
       }
       const { container } = render(<Data />);
 
-      act(() => {
+      await act(async () => {
         eventHandlers
           .get('storage')
           .broadcastEvent?.({ key: DEFAULT_MODE_STORAGE_KEY, newValue: 'dark' });
@@ -661,7 +662,7 @@ describe('useCurrentColorScheme', () => {
       });
     });
 
-    it('storage mode changes from `light` to `auto`', () => {
+    it('storage mode changes from `light` to `auto`', async () => {
       window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark'
       function Data() {
         const { ...data } = useCurrentColorScheme({
@@ -673,7 +674,7 @@ describe('useCurrentColorScheme', () => {
       }
       const { container } = render(<Data />);
 
-      act(() => {
+      await act(async () => {
         eventHandlers
           .get('storage')
           .broadcastEvent?.({ key: DEFAULT_MODE_STORAGE_KEY, newValue: 'system' });
@@ -688,7 +689,7 @@ describe('useCurrentColorScheme', () => {
       });
     });
 
-    it('storage mode is deleted', () => {
+    it('storage mode is deleted', async () => {
       storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
       function Data() {
         const { ...data } = useCurrentColorScheme({
@@ -701,7 +702,7 @@ describe('useCurrentColorScheme', () => {
       }
       const { container } = render(<Data />);
 
-      act(() => {
+      await act(async () => {
         eventHandlers
           .get('storage')
           .broadcastEvent?.({ key: DEFAULT_MODE_STORAGE_KEY, newValue: null });
@@ -716,7 +717,7 @@ describe('useCurrentColorScheme', () => {
       });
     });
 
-    it('storage lightColorScheme & darkColorScheme changes', () => {
+    it('storage lightColorScheme & darkColorScheme changes', async () => {
       function Data() {
         const { ...data } = useCurrentColorScheme({
           defaultMode: 'system',
@@ -728,7 +729,7 @@ describe('useCurrentColorScheme', () => {
       }
       const { container } = render(<Data />);
 
-      act(() => {
+      await act(async () => {
         eventHandlers.get('storage').broadcastEvent?.({
           key: `${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-light`,
           newValue: 'light-dim',
@@ -743,14 +744,14 @@ describe('useCurrentColorScheme', () => {
         colorScheme: 'light-dim',
       });
 
-      act(() => {
+      await act(async () => {
         eventHandlers.get('storage').broadcastEvent?.({
           key: `${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-dark`,
           newValue: 'dark-dim',
         });
       });
 
-      act(() => {
+      await act(async () => {
         trigger({ matches: true });
       });
 
@@ -879,7 +880,7 @@ describe('useCurrentColorScheme', () => {
       expect(storageManager({ key: DEFAULT_MODE_STORAGE_KEY }).get()).to.equal('dark');
     });
 
-    it('handle subscription', () => {
+    it('handle subscription', async () => {
       function Data() {
         const { setMode, ...data } = useCurrentColorScheme({
           storageManager,
@@ -900,7 +901,7 @@ describe('useCurrentColorScheme', () => {
       }
       const { container } = render(<Data />);
 
-      act(() => {
+      await act(async () => {
         eventHandlers.get('storage').broadcastEvent?.({
           key: DEFAULT_MODE_STORAGE_KEY,
           newValue: 'dark',
diff --git a/packages/mui-utils/src/useControlled/useControlled.test.tsx b/packages/mui-utils/src/useControlled/useControlled.test.tsx
index 5384274689b717..69b5d94f59d8b3 100644
--- a/packages/mui-utils/src/useControlled/useControlled.test.tsx
+++ b/packages/mui-utils/src/useControlled/useControlled.test.tsx
@@ -29,7 +29,7 @@ const TestComponent = <T,>({ value: valueProp, defaultValue, children }: TestCom
 describe('useControlled', () => {
   const { render } = createRenderer();
 
-  it('works correctly when is not controlled', () => {
+  it('works correctly when is not controlled', async () => {
     let valueState = 0;
     let setValueState: React.Dispatch<React.SetStateAction<number | undefined>>;
     render(
@@ -43,7 +43,7 @@ describe('useControlled', () => {
     );
     expect(valueState).to.equal(1);
 
-    act(() => {
+    await act(async () => {
       setValueState(2);
     });
 
diff --git a/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.tsx b/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.tsx
index be35b5d2a2d875..305a49021591e5 100644
--- a/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.tsx
+++ b/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.tsx
@@ -82,8 +82,8 @@ describe('useIsFocusVisible', () => {
       reactRoot = ReactDOMClient.createRoot(rootElement.shadowRoot!);
     });
 
-    afterEach(() => {
-      act(() => {
+    afterEach(async () => {
+      await act(async () => {
         reactRoot.unmount();
       });
 
@@ -92,7 +92,7 @@ describe('useIsFocusVisible', () => {
       document.body.removeChild(rootElement);
     });
 
-    it('should set focus state for shadowRoot children', () => {
+    it('should set focus state for shadowRoot children', async () => {
       const buttonRef = React.createRef<HTMLButtonElement>();
       render(
         <SimpleButton id="test-button" ref={buttonRef}>
@@ -113,7 +113,7 @@ describe('useIsFocusVisible', () => {
 
       expect(button!.classList.contains('focus-visible')).to.equal(false);
 
-      act(() => {
+      await act(async () => {
         button!.focus();
       });
 
@@ -123,10 +123,10 @@ describe('useIsFocusVisible', () => {
         expect(button).not.to.have.class('focus-visible');
       }
 
-      act(() => {
+      await act(async () => {
         button!.blur();
       });
-      focusVisible(button!);
+      await focusVisible(button!);
 
       expect(button!.classList.contains('focus-visible')).to.equal(true);
     });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d27e3ec73e8a7..888f3bdd97c9cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -277,6 +277,9 @@ importers:
       karma-sourcemap-loader:
         specifier: ^0.4.0
         version: 0.4.0
+      karma-spec-reporter:
+        specifier: ^0.0.36
+        version: 0.0.36(karma@6.4.4)
       karma-webpack:
         specifier: ^5.0.0
         version: 5.0.0(webpack@5.99.7)
@@ -9890,6 +9893,11 @@ packages:
   karma-sourcemap-loader@0.4.0:
     resolution: {integrity: sha512-xCRL3/pmhAYF3I6qOrcn0uhbQevitc2DERMPH82FMnG+4WReoGcGFZb1pURf2a5apyrOHRdvD+O6K7NljqKHyA==}
 
+  karma-spec-reporter@0.0.36:
+    resolution: {integrity: sha512-11bvOl1x6ryKZph7kmbmMpbi8vsngEGxGOoeTlIcDaH3ab3j8aPJnZ+r+K/SS0sBSGy5VGkGYO2+hLct7hw/6w==}
+    peerDependencies:
+      karma: '>=0.9'
+
   karma-webpack@5.0.0:
     resolution: {integrity: sha512-+54i/cd3/piZuP3dr54+NcFeKOPnys5QeM1IY+0SPASwrtHsliXUiCL50iW+K9WWA7RvamC4macvvQ86l3KtaA==}
     engines: {node: '>= 6'}
@@ -23061,6 +23069,11 @@ snapshots:
     dependencies:
       graceful-fs: 4.2.11
 
+  karma-spec-reporter@0.0.36(karma@6.4.4):
+    dependencies:
+      colors: 1.4.0
+      karma: 6.4.4
+
   karma-webpack@5.0.0(webpack@5.99.7):
     dependencies:
       glob: 7.2.3
diff --git a/test/karma.conf.js b/test/karma.conf.js
index e38f4568f3e9e7..163ff94f066d4b 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -42,6 +42,17 @@ const AVERAGE_KARMA_BUILD = 1 / 6;
 // CircleCI accepts up to 83 concurrent builds.
 const MAX_CIRCLE_CI_CONCURRENCY = 83;
 
+const testFilePatterns = [
+  'packages/mui-material/test/integration/**/*.test.*',
+  'packages/mui-material/src/**/*.test.*',
+  'packages/mui-lab/src/**/*.test.*',
+  'packages/mui-styled-engine/src/**/*.test.*',
+  'packages/mui-styled-engine-sc/src/**/*.test.*',
+  'packages/mui-system/src/**/*.test.*',
+  'packages/mui-utils/src/**/*.test.*',
+  'packages/mui-joy/src/**/*.test.*',
+];
+
 // Karma configuration
 module.exports = function setKarmaConfig(config) {
   const baseConfig = {
@@ -67,10 +78,11 @@ module.exports = function setKarmaConfig(config) {
     },
     frameworks: ['mocha', 'webpack'],
     files: [
-      {
-        pattern: 'test/karma.tests.js',
+      'test/setupKarma.js',
+      ...testFilePatterns.map((pattern) => ({
+        pattern,
         watched: false,
-      },
+      })),
       {
         pattern: 'test/assets/*.png',
         watched: false,
@@ -85,6 +97,7 @@ module.exports = function setKarmaConfig(config) {
       'karma-sourcemap-loader',
       'karma-webpack',
       'karma-firefox-launcher',
+      'karma-spec-reporter',
     ],
     /**
      * possible values:
@@ -97,7 +110,8 @@ module.exports = function setKarmaConfig(config) {
     logLevel: config.LOG_INFO,
     port: 9876,
     preprocessors: {
-      'test/karma.tests.js': ['webpack', 'sourcemap'],
+      'test/setupKarma.js': ['webpack', 'sourcemap'],
+      ...Object.fromEntries(testFilePatterns.map((pattern) => [pattern, ['webpack', 'sourcemap']])),
     },
     proxies: {
       '/fake.png': '/base/test/assets/fake.png',
@@ -105,7 +119,7 @@ module.exports = function setKarmaConfig(config) {
     },
     // The CI branch fixes double log issue
     // https://github.com/karma-runner/karma/issues/2342
-    reporters: ['dots', ...(CI ? ['coverage-istanbul'] : [])],
+    reporters: CI ? ['dots', 'coverage-istanbul'] : ['spec'],
     webpack: {
       mode: 'development',
       devtool: CI ? 'inline-source-map' : 'eval-source-map',
@@ -199,10 +213,10 @@ module.exports = function setKarmaConfig(config) {
     customLaunchers: {
       chromeHeadless: {
         base: 'ChromeHeadless',
-        flags: ['--no-sandbox'],
+        flags: ['--no-sandbox', '--use-mock-keychain'],
       },
     },
-    singleRun: CI,
+    singleRun: true,
   };
 
   let newConfig = baseConfig;
diff --git a/test/karma.tests.js b/test/karma.tests.js
deleted file mode 100644
index ea6f4a1560844d..00000000000000
--- a/test/karma.tests.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import '@mui/internal-test-utils/init';
-import '@mui/internal-test-utils/setupKarma';
-
-const materialIntegrationContext = require.context(
-  '../packages/mui-material/test/integration',
-  true,
-  /\.test\.(js|ts|tsx)$/,
-);
-materialIntegrationContext.keys().forEach(materialIntegrationContext);
-
-const materialUnitContext = require.context(
-  '../packages/mui-material/src/',
-  true,
-  /\.test\.(js|ts|tsx)$/,
-);
-materialUnitContext.keys().forEach(materialUnitContext);
-
-const labUnitContext = require.context('../packages/mui-lab/src/', true, /\.test\.(js|ts|tsx)$/);
-labUnitContext.keys().forEach(labUnitContext);
-
-const styledEngineContext = require.context(
-  '../packages/mui-styled-engine/src/',
-  true,
-  /\.test\.(js|ts|tsx)$/,
-);
-styledEngineContext.keys().forEach(styledEngineContext);
-
-const styledEngineSCContext = require.context(
-  '../packages/mui-styled-engine-sc/src/',
-  true,
-  /\.test\.(js|ts|tsx)$/,
-);
-styledEngineSCContext.keys().forEach(styledEngineSCContext);
-
-const systemContext = require.context('../packages/mui-system/src/', true, /\.test\.(js|ts|tsx)$/);
-systemContext.keys().forEach(systemContext);
-
-const utilsContext = require.context('../packages/mui-utils/src/', true, /\.test\.(js|ts|tsx)$/);
-utilsContext.keys().forEach(utilsContext);
-
-const joyContext = require.context('../packages/mui-joy/src', true, /\.test\.(js|ts|tsx)$/);
-joyContext.keys().forEach(joyContext);
diff --git a/test/setupKarma.js b/test/setupKarma.js
new file mode 100644
index 00000000000000..77e61b397cd5cf
--- /dev/null
+++ b/test/setupKarma.js
@@ -0,0 +1,2 @@
+import '@mui/internal-test-utils/init';
+import '@mui/internal-test-utils/setupKarma';