diff --git a/pages/modal/async-modal-root.page.tsx b/pages/modal/async-modal-root.page.tsx
index ac6f4a7609..fe581ed394 100644
--- a/pages/modal/async-modal-root.page.tsx
+++ b/pages/modal/async-modal-root.page.tsx
@@ -4,11 +4,13 @@ import React, { useState } from 'react';
 
 import { Button, Modal, ModalProps } from '~components';
 
-const getModalRoot: ModalProps['getModalRoot'] = async () => {
+const getModalRoot: ModalProps['getModalRoot'] = async ({ abortSignal }) => {
   await new Promise(resolve => setTimeout(resolve, 1000));
   const element = document.createElement('div');
   element.setAttribute('id', 'async-modal-root');
-  document.body.appendChild(element);
+  if (!abortSignal.aborted) {
+    document.body.appendChild(element);
+  }
   return element;
 };
 
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index e9fb857877..c19dceb14d 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -7649,14 +7649,19 @@ is provided by its parent form field component.",
       "description": "Use this property to specify a different dynamic modal root for the dialog.
 The function will be called when a user clicks on the trigger button.",
       "inlineType": {
-        "name": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "name": "(options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>",
+        "parameters": [
+          {
+            "name": "options",
+            "type": "{ abortSignal: AbortSignal; }",
+          },
+        ],
         "returnType": "Promise<HTMLElement>",
         "type": "function",
       },
       "name": "getModalRoot",
       "optional": true,
-      "type": "(() => Promise<HTMLElement>)",
+      "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
     {
       "description": "An object containing all the necessary localized strings required by the component.
@@ -8091,11 +8096,11 @@ You can use any theme provided by Ace.",
 element after a user closes the dialog. The function receives the return value
 of the most recent getModalRoot call as an argument.",
       "inlineType": {
-        "name": "(container: HTMLElement) => void",
+        "name": "(container: HTMLElement | null) => void",
         "parameters": [
           {
             "name": "container",
-            "type": "HTMLElement",
+            "type": "HTMLElement | null",
           },
         ],
         "returnType": "void",
@@ -8103,7 +8108,7 @@ of the most recent getModalRoot call as an argument.",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((container: HTMLElement) => void)",
+      "type": "((container: HTMLElement | null) => void)",
     },
     {
       "description": "List of Ace themes available for selection in preferences dialog. Make sure you include at least one light and at
@@ -8547,14 +8552,19 @@ the custom content is displayed at the bottom of the left column within the moda
       "description": "Use this property to specify a different dynamic modal root for the dialog.
 The function will be called when a user clicks on the trigger button.",
       "inlineType": {
-        "name": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "name": "(options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>",
+        "parameters": [
+          {
+            "name": "options",
+            "type": "{ abortSignal: AbortSignal; }",
+          },
+        ],
         "returnType": "Promise<HTMLElement>",
         "type": "function",
       },
       "name": "getModalRoot",
       "optional": true,
-      "type": "(() => Promise<HTMLElement>)",
+      "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
     {
       "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
@@ -8694,11 +8704,11 @@ It contains the following:
 element after a user closes the dialog. The function receives the return value
 of the most recent getModalRoot call as an argument.",
       "inlineType": {
-        "name": "(container: HTMLElement) => void",
+        "name": "(container: HTMLElement | null) => void",
         "parameters": [
           {
             "name": "container",
-            "type": "HTMLElement",
+            "type": "HTMLElement | null",
           },
         ],
         "returnType": "void",
@@ -8706,7 +8716,7 @@ of the most recent getModalRoot call as an argument.",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((container: HTMLElement) => void)",
+      "type": "((container: HTMLElement | null) => void)",
     },
     {
       "description": "Configures the sticky columns preference that can be set for both left and right columns.
@@ -16774,14 +16784,19 @@ The event detail contains the \`reason\`, which can be any of the following:
       "description": "Use this property to specify a different dynamic modal root for the dialog.
 The function will be called when a user clicks on the trigger button.",
       "inlineType": {
-        "name": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "name": "(options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>",
+        "parameters": [
+          {
+            "name": "options",
+            "type": "{ abortSignal: AbortSignal; }",
+          },
+        ],
         "returnType": "Promise<HTMLElement>",
         "type": "function",
       },
       "name": "getModalRoot",
       "optional": true,
-      "type": "(() => Promise<HTMLElement>)",
+      "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
     {
       "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
@@ -16805,11 +16820,11 @@ render to an element under \`document.body\`.",
 element after a user closes the dialog. The function receives the return value
 of the most recent getModalRoot call as an argument.",
       "inlineType": {
-        "name": "(container: HTMLElement) => void",
+        "name": "(container: HTMLElement | null) => void",
         "parameters": [
           {
             "name": "container",
-            "type": "HTMLElement",
+            "type": "HTMLElement | null",
           },
         ],
         "returnType": "void",
@@ -16817,7 +16832,7 @@ of the most recent getModalRoot call as an argument.",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((container: HTMLElement) => void)",
+      "type": "((container: HTMLElement | null) => void)",
     },
     {
       "defaultValue": "'medium'",
@@ -20434,14 +20449,19 @@ The return type of the function should be a promise that resolves to a list of v
       "description": "Use this property to specify a different dynamic modal root for the dialog.
 The function will be called when a user clicks on the trigger button.",
       "inlineType": {
-        "name": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "name": "(options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>",
+        "parameters": [
+          {
+            "name": "options",
+            "type": "{ abortSignal: AbortSignal; }",
+          },
+        ],
         "returnType": "Promise<HTMLElement>",
         "type": "function",
       },
       "name": "getModalRoot",
       "optional": true,
-      "type": "(() => Promise<HTMLElement>)",
+      "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
     {
       "description": "An object containing all the necessary localized strings required by the component.",
@@ -21000,11 +21020,11 @@ and 'Size'.",
 element after a user closes the dialog. The function receives the return value
 of the most recent getModalRoot call as an argument.",
       "inlineType": {
-        "name": "(container: HTMLElement) => void",
+        "name": "(container: HTMLElement | null) => void",
         "parameters": [
           {
             "name": "container",
-            "type": "HTMLElement",
+            "type": "HTMLElement | null",
           },
         ],
         "returnType": "void",
@@ -21012,7 +21032,7 @@ of the most recent getModalRoot call as an argument.",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((container: HTMLElement) => void)",
+      "type": "((container: HTMLElement | null) => void)",
     },
     {
       "description": "The current selected resource. Resource has the following properties:
diff --git a/src/modal/__integ__/modal.test.ts b/src/modal/__integ__/modal.test.ts
index ff6fe76564..922f9a9a03 100644
--- a/src/modal/__integ__/modal.test.ts
+++ b/src/modal/__integ__/modal.test.ts
@@ -98,7 +98,7 @@ test(
   })
 );
 
-(process.env.REACT_VERSION !== '18' ? test : test.skip)(
+test(
   'renders modal in async root',
   useBrowser(async browser => {
     const page = new BasePageObject(browser);