diff --git a/packages/ui/src/components/ConfirmModal/AcModal.tsx b/packages/ui/src/components/ConfirmModal/AcModal.tsx
index a894e8ba08d..10f8835b756 100644
--- a/packages/ui/src/components/ConfirmModal/AcModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/AcModal.tsx
@@ -27,7 +27,6 @@ const AcModal = ({
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
-      appElement={document.querySelector('main') ?? undefined}
     >
       <div className={styles.container}>
         <div className={styles.header}>
diff --git a/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx b/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx
index eccf7076a9d..fb1cfae9859 100644
--- a/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx
@@ -32,7 +32,6 @@ const IframeConfirmModal = ({
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
-      appElement={document.querySelector('main') ?? undefined}
     >
       <div className={styles.container}>
         <div className={styles.content}>
diff --git a/packages/ui/src/components/ConfirmModal/MobileModal.tsx b/packages/ui/src/components/ConfirmModal/MobileModal.tsx
index a8ae6863f54..fa0ab7a7665 100644
--- a/packages/ui/src/components/ConfirmModal/MobileModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/MobileModal.tsx
@@ -25,7 +25,6 @@ const MobileModal = ({
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
-      appElement={document.querySelector('main') ?? undefined}
     >
       <div className={styles.container}>
         <div className={styles.content}>{children}</div>
diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx
index f56dd36d626..d3a303b7136 100644
--- a/packages/ui/src/components/Drawer/index.tsx
+++ b/packages/ui/src/components/Drawer/index.tsx
@@ -23,7 +23,6 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => {
       isOpen={isOpen}
       className={classNames(styles.drawer, className)}
       overlayClassName={modalStyles.overlay}
-      appElement={document.querySelector('main') ?? undefined}
       closeTimeoutMS={300}
       onRequestClose={onClose}
     >
diff --git a/packages/ui/src/containers/CreateAccount/index.test.tsx b/packages/ui/src/containers/CreateAccount/index.test.tsx
index 6d66906dcd1..8defc0c82b4 100644
--- a/packages/ui/src/containers/CreateAccount/index.test.tsx
+++ b/packages/ui/src/containers/CreateAccount/index.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
 import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
@@ -218,10 +218,12 @@ describe('<CreateAccount/>', () => {
     const termsButton = getByText('description.agree_with_terms');
     fireEvent.click(termsButton);
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(register).toBeCalledWith('username', '123456');
+    await waitFor(() => {
+      expect(register).toBeCalledWith('username', '123456');
+    });
   });
 });
diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx
index c4efdba3b0e..83950e32af6 100644
--- a/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx
+++ b/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@@ -78,11 +78,13 @@ describe('<EmailPasswordless/>', () => {
 
     const submitButton = getByText('action.continue');
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(sendSignInEmailPasscode).toBeCalledWith('foo@logto.io');
+    await waitFor(() => {
+      expect(sendSignInEmailPasscode).toBeCalledWith('foo@logto.io');
+    });
   });
 
   test('should call register method properly', async () => {
@@ -103,10 +105,12 @@ describe('<EmailPasswordless/>', () => {
 
     const submitButton = getByText('action.continue');
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(sendRegisterEmailPasscode).toBeCalledWith('foo@logto.io');
+    await waitFor(() => {
+      expect(sendRegisterEmailPasscode).toBeCalledWith('foo@logto.io');
+    });
   });
 });
diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx
index 4e2d5edc03d..9aab7f504d4 100644
--- a/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx
+++ b/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@@ -85,11 +85,13 @@ describe('<PhonePasswordless/>', () => {
 
     const submitButton = getByText('action.continue');
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(sendSignInSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
+    await waitFor(() => {
+      expect(sendSignInSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
+    });
   });
 
   test('should call register method properly', async () => {
@@ -110,10 +112,12 @@ describe('<PhonePasswordless/>', () => {
 
     const submitButton = getByText('action.continue');
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(sendRegisterSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
+    await waitFor(() => {
+      expect(sendRegisterSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
+    });
   });
 });
diff --git a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx
index b36a9883212..ef78bf38bc8 100644
--- a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx
+++ b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx
@@ -81,11 +81,13 @@ describe('SecondarySocialSignIn', () => {
     const socialButton = container.querySelector('button');
 
     if (socialButton) {
-      await waitFor(() => {
+      act(() => {
         fireEvent.click(socialButton);
       });
 
-      expect(invokeSocialSignInSpy).toBeCalled();
+      void waitFor(() => {
+        expect(invokeSocialSignInSpy).toBeCalled();
+      });
     }
   });
 
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 2fff3263407..8d87a3b4fba 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,7 +1,9 @@
 import { createRoot } from 'react-dom/client';
+import ReactModal from 'react-modal';
 
 import App from './App';
 
 const app = document.querySelector('#app');
 const root = app && createRoot(app);
+ReactModal.setAppElement('#app');
 root?.render(<App />);
diff --git a/packages/ui/src/pages/SocialSignInCallback/index.test.tsx b/packages/ui/src/pages/SocialSignInCallback/index.test.tsx
index a5a5edeb51e..708ba36590a 100644
--- a/packages/ui/src/pages/SocialSignInCallback/index.test.tsx
+++ b/packages/ui/src/pages/SocialSignInCallback/index.test.tsx
@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react';
+import { waitFor, act } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@@ -41,8 +41,10 @@ describe('SocialCallbackPage with code', () => {
       </SettingsProvider>
     );
 
-    await waitFor(() => {
-      expect(signInWithSocialSpy).toBeCalled();
+    await act(async () => {
+      await waitFor(() => {
+        expect(signInWithSocialSpy).toBeCalled();
+      });
     });
   });
 });