diff --git a/packages/react-native-web/src/exports/Modal/ModalPortal.js b/packages/react-native-web/src/exports/Modal/ModalPortal.js
index 29e63a128..3a031246a 100644
--- a/packages/react-native-web/src/exports/Modal/ModalPortal.js
+++ b/packages/react-native-web/src/exports/Modal/ModalPortal.js
@@ -20,17 +20,16 @@ function ModalPortal(props: ModalPortalProps): React.Node {
   const { children } = props;
   const elementRef = React.useRef(null);
 
-  if (canUseDOM && !elementRef.current) {
-    const element = document.createElement('div');
-
-    if (element && document.body) {
-      document.body.appendChild(element);
-      elementRef.current = element;
-    }
-  }
-
   React.useEffect(() => {
     if (canUseDOM) {
+      if (!elementRef.current) {
+        const element = document.createElement('div');
+
+        if (element && document.body) {
+          document.body.appendChild(element);
+          elementRef.current = element;
+        };
+      }
       return () => {
         if (document.body && elementRef.current) {
           document.body.removeChild(elementRef.current);