Fix inconsistent modal portal ID

components/modal/modal.js

@@ -5,15 +5,17 @@ import FocusTrap from 'focus-trap-react'
 
 import styles from './modal.module.css'
 
+const PORTAL_ID = '__sos_modal';
+
 export default function Modal({visible, title, children, onDeactivate}){
   const [portalExists, setPortalExists] = useState(false);
 
   useEffect(() => {
-    const portalExists = !!document.querySelector('#sos-modal');
+    const portalExists = !!document.querySelector(`#${PORTAL_ID}`);
 
     if (!portalExists) {
       const portal = document.createElement('div');
-      portal.id = '#sos-modal';
+      portal.id = PORTAL_ID;
       document.body.appendChild(portal);
     }
 
@@ -43,5 +45,5 @@ export default function Modal({visible, title, children, onDeactivate}){
         </FocusTrap>
       )}
     </div>
-  ), window.document.body)
+  ), document.querySelector(`#${PORTAL_ID}`))
 }