diff --git a/package.json b/package.json
index b2853126860..6dc4899d787 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "@testing-library/cypress": "9.0.0",
     "@testing-library/dom": "8.20.1",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
     "@types/lodash": "4.14.202",
     "@types/node": "18.19.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25c5e80e028..eae9822eb7f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,8 +37,8 @@ importers:
         specifier: 5.17.0
         version: 5.17.0
       '@testing-library/user-event':
-        specifier: 13.5.0
-        version: 13.5.0(@testing-library/dom@8.20.1)
+        specifier: 14.5.2
+        version: 14.5.2(@testing-library/dom@8.20.1)
       '@types/jest':
         specifier: 29.5.12
         version: 29.5.12
@@ -10377,13 +10377,12 @@ packages:
       react-dom: 16.14.0(react@16.14.0)
     dev: true
 
-  /@testing-library/user-event@13.5.0(@testing-library/dom@8.20.1):
-    resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==}
-    engines: {node: '>=10', npm: '>=6'}
+  /@testing-library/user-event@14.5.2(@testing-library/dom@8.20.1):
+    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
+    engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
     dependencies:
-      '@babel/runtime': 7.23.1
       '@testing-library/dom': 8.20.1
     dev: true
 
diff --git a/tools/ui-components/src/button/button.test.tsx b/tools/ui-components/src/button/button.test.tsx
index 7cc90d755ad..5ffd313495e 100644
--- a/tools/ui-components/src/button/button.test.tsx
+++ b/tools/ui-components/src/button/button.test.tsx
@@ -33,14 +33,14 @@ describe('<Button />', () => {
     ).toHaveAttribute('type', 'submit');
   });
 
-  it('should trigger the onClick prop on click', () => {
+  it('should trigger the onClick prop on click', async () => {
     const onClick = jest.fn();
 
     render(<Button onClick={onClick}>Hello world</Button>);
 
     const button = screen.getByRole('button', { name: /hello world/i });
 
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });
@@ -56,7 +56,7 @@ describe('<Button />', () => {
     expect(button).not.toHaveAttribute('disabled', 'true');
   });
 
-  it('should not trigger the onClick prop if the button is disabled', () => {
+  it('should not trigger the onClick prop if the button is disabled', async () => {
     const onClick = jest.fn();
 
     render(
@@ -66,8 +66,7 @@ describe('<Button />', () => {
     );
 
     const button = screen.getByRole('button', { name: /hello world/i });
-
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(onClick).not.toHaveBeenCalled();
   });
diff --git a/tools/ui-components/src/close-button/close-button.test.tsx b/tools/ui-components/src/close-button/close-button.test.tsx
index 0ac14e0e712..87e3536a4b0 100644
--- a/tools/ui-components/src/close-button/close-button.test.tsx
+++ b/tools/ui-components/src/close-button/close-button.test.tsx
@@ -25,11 +25,11 @@ describe('<CloseButton>', () => {
     ).toBeInTheDocument();
   });
 
-  it('should call "onClick" handler on button click', () => {
+  it('should call "onClick" handler on button click', async () => {
     const onClick = jest.fn();
     render(<CloseButton onClick={onClick} />);
 
-    userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('button'));
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });
diff --git a/tools/ui-components/src/drop-down/drop-down.test.tsx b/tools/ui-components/src/drop-down/drop-down.test.tsx
index ff04a3309a4..d6d0d51f3b1 100644
--- a/tools/ui-components/src/drop-down/drop-down.test.tsx
+++ b/tools/ui-components/src/drop-down/drop-down.test.tsx
@@ -5,7 +5,7 @@ import { MenuItem } from './menu-item/menu-item';
 import { Dropdown } from './drop-down';
 
 describe('<DropDownButton>', () => {
-  it('should render button with text', () => {
+  it('should render button with text', async () => {
     render(
       <Dropdown>
         <Dropdown.Toggle>Some Button</Dropdown.Toggle>
@@ -17,14 +17,14 @@ describe('<DropDownButton>', () => {
       </Dropdown>
     );
     const dropdownTrigger = screen.getByText('Some Button');
-    userEvent.click(dropdownTrigger);
+    await userEvent.click(dropdownTrigger);
     const unorderedList = screen.getByRole('menu');
     const item = within(unorderedList).getAllByText('Option');
     expect(unorderedList).toBeInTheDocument();
     expect(dropdownTrigger).toBeInTheDocument();
     expect(item.length).toBe(3);
   });
-  it('should render button with direction to up', () => {
+  it('should render button with direction to up', async () => {
     render(
       <Dropdown dropup={true}>
         <Dropdown.Toggle>Some Button</Dropdown.Toggle>
@@ -36,14 +36,14 @@ describe('<DropDownButton>', () => {
       </Dropdown>
     );
     const dropdownTrigger = screen.getByText('Some Button');
-    userEvent.click(dropdownTrigger);
+    await userEvent.click(dropdownTrigger);
     const unorderedList = screen.getByRole('menu');
     expect(unorderedList).toHaveClass(
       'list-none bg-foreground-secondary text-center border-1 border-solid border-background-quaternary focus:outline-transparent origin-top-right absolute w-full min-w-max py-1 px-0 z-10 transform -translate-y-full top-0'
     );
   });
 
-  it("should have the role 'button' and render the correct text", () => {
+  it("should have the role 'button' and render the correct text", async () => {
     render(
       <Dropdown>
         <Dropdown.Toggle>test</Dropdown.Toggle>
@@ -53,13 +53,13 @@ describe('<DropDownButton>', () => {
       </Dropdown>
     );
     const dropDownTrigger = screen.getByText('test');
-    userEvent.click(dropDownTrigger);
+    await userEvent.click(dropDownTrigger);
     const unorderedList = screen.getByRole('menu');
     const item = within(unorderedList).getByText('Hello world');
     expect(item).toBeInTheDocument();
   });
 
-  it('should trigger the onClick prop on click', () => {
+  it('should trigger the onClick prop on click', async () => {
     const onClick = jest.fn();
 
     render(
@@ -72,16 +72,16 @@ describe('<DropDownButton>', () => {
     );
 
     const dropDownTrigger = screen.getByText('test');
-    userEvent.click(dropDownTrigger);
+    await userEvent.click(dropDownTrigger);
     const unorderedList = screen.getByRole('menu');
     const Item = within(unorderedList).getByText('Hello world');
 
-    userEvent.click(Item);
+    await userEvent.click(Item);
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('should reflect the disabled state using the aria-disabled attribute', () => {
+  it('should reflect the disabled state using the aria-disabled attribute', async () => {
     render(
       <Dropdown>
         <Dropdown.Toggle>test</Dropdown.Toggle>
@@ -92,7 +92,7 @@ describe('<DropDownButton>', () => {
     );
 
     const dropDownTrigger = screen.getByText('test');
-    userEvent.click(dropDownTrigger);
+    await userEvent.click(dropDownTrigger);
     const unorderedList = screen.getByRole('menu');
     const Item = within(unorderedList).getByText('Hello world');
 
@@ -102,7 +102,7 @@ describe('<DropDownButton>', () => {
     expect(Item).toBeEnabled();
   });
 
-  it('should not trigger the onClick prop if the button is disabled', () => {
+  it('should not trigger the onClick prop if the button is disabled', async () => {
     const onClick = jest.fn();
 
     render(
@@ -117,15 +117,15 @@ describe('<DropDownButton>', () => {
     );
 
     const dropDownTrigger = screen.getByText('test');
-    userEvent.click(dropDownTrigger);
+    await userEvent.click(dropDownTrigger);
     const unorderedList = screen.getByRole('menu');
     const Item = within(unorderedList).getByText('Hello world');
-    userEvent.click(Item);
+    await userEvent.click(Item);
 
     expect(onClick).not.toHaveBeenCalled();
   });
 
-  it('should render an anchor element if the `href` prop is defined', () => {
+  it('should render an anchor element if the `href` prop is defined', async () => {
     render(
       <Dropdown>
         <Dropdown.Toggle>test</Dropdown.Toggle>
@@ -136,7 +136,7 @@ describe('<DropDownButton>', () => {
     );
 
     const dropDownTrigger = screen.getByText('test');
-    userEvent.click(dropDownTrigger);
+    await userEvent.click(dropDownTrigger);
     const unorderedList = screen.getByRole('menu');
     const Item = within(unorderedList).getByText('freeCodeCamp');
 
@@ -144,7 +144,7 @@ describe('<DropDownButton>', () => {
     expect(Item).toHaveAttribute('href', 'https://www.freecodecamp.org');
   });
 
-  it('should render a button element if the `href` and `disabled` props are both defined', () => {
+  it('should render a button element if the `href` and `disabled` props are both defined', async () => {
     render(
       <Dropdown>
         <Dropdown.Toggle>test</Dropdown.Toggle>
@@ -157,7 +157,7 @@ describe('<DropDownButton>', () => {
     );
 
     const dropDownTrigger = screen.getByText('test');
-    userEvent.click(dropDownTrigger);
+    await userEvent.click(dropDownTrigger);
     const unorderedList = screen.getByRole('menu');
     const Item = within(unorderedList).getByText('freeCodeCamp');
 
diff --git a/tools/ui-components/src/tabs/tabs.test.tsx b/tools/ui-components/src/tabs/tabs.test.tsx
index 28f2f3e587f..a336bbd9d14 100644
--- a/tools/ui-components/src/tabs/tabs.test.tsx
+++ b/tools/ui-components/src/tabs/tabs.test.tsx
@@ -5,7 +5,7 @@ import { render, screen } from '@testing-library/react';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '.';
 
 describe('<Tabs />', () => {
-  it('should switch tabs content if the tab trigger is pressed', () => {
+  it('should switch tabs content if the tab trigger is pressed', async () => {
     render(
       <Tabs defaultValue='code'>
         <TabsList>
@@ -22,7 +22,7 @@ describe('<Tabs />', () => {
     expect(codeContent).toBeInTheDocument();
 
     const tabsTrigger = screen.getByText('Tests');
-    userEvent.click(tabsTrigger);
+    await userEvent.click(tabsTrigger);
     const testContent = screen.getByText('Here is the test for the code.');
     expect(testContent).toBeInTheDocument();
     expect(codeContent).not.toBeInTheDocument();
diff --git a/tools/ui-components/src/toggle-button/toggle-button.test.tsx b/tools/ui-components/src/toggle-button/toggle-button.test.tsx
index 0d476927259..0cf940cdaa3 100644
--- a/tools/ui-components/src/toggle-button/toggle-button.test.tsx
+++ b/tools/ui-components/src/toggle-button/toggle-button.test.tsx
@@ -11,11 +11,11 @@ describe('<ToggleButton />', () => {
     expect(screen.getByRole('button', { name: /on/i })).toBeInTheDocument();
   });
 
-  it('should call onChange when clicked', () => {
+  it('should call onChange when clicked', async () => {
     const onChange = jest.fn();
     render(<ToggleButton onChange={onChange}>On</ToggleButton>);
 
-    userEvent.click(screen.getByRole('button', { name: /on/i }));
+    await userEvent.click(screen.getByRole('button', { name: /on/i }));
 
     expect(onChange).toHaveBeenCalledTimes(1);
   });
@@ -49,7 +49,7 @@ describe('<ToggleButton />', () => {
     );
   });
 
-  it('should not trigger onChange if disabled prop is true', () => {
+  it('should not trigger onChange if disabled prop is true', async () => {
     const onChange = jest.fn();
     render(
       <ToggleButton disabled={true} onChange={onChange}>
@@ -57,7 +57,7 @@ describe('<ToggleButton />', () => {
       </ToggleButton>
     );
 
-    userEvent.click(screen.getByRole('button', { name: /on/i }));
+    await userEvent.click(screen.getByRole('button', { name: /on/i }));
 
     expect(onChange).not.toHaveBeenCalled();
   });