fix(react): modal now mounts child component independently of other modals (#23903)

resolves #23904

Author: puopg

packages/react/src/components/createOverlayComponent.tsx

@@ -35,12 +35,10 @@ export const createOverlayComponent = <
       forwardedRef?: React.ForwardedRef<OverlayType>;
     };
 
-  let isDismissing = false;
-
   class Overlay extends React.Component<Props> {
     overlay?: OverlayType;
     el!: HTMLDivElement;
-
+    isDismissing = false;
     constructor(props: Props) {
       super(props);
       if (typeof document !== 'undefined') {
@@ -75,7 +73,7 @@ export const createOverlayComponent = <
     shouldComponentUpdate(nextProps: Props) {
       // Check if the overlay component is about to dismiss
       if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
-        isDismissing = true;
+        this.isDismissing = true;
       }
 
       return true;
@@ -91,7 +89,7 @@ export const createOverlayComponent = <
       }
       if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
         await this.overlay.dismiss();
-        isDismissing = false;
+        this.isDismissing = false;
 
         /**
          * Now that the overlay is dismissed
@@ -142,7 +140,7 @@ export const createOverlayComponent = <
        * overlay is dismissing otherwise component
        * will be hidden before animation is done.
        */
-      return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
+      return ReactDOM.createPortal(this.props.isOpen || this.isDismissing ? this.props.children : null, this.el);
     }
   }