open popups in portals

client/src/components/ui/Popup/index.tsx

 
 import { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 import './popup.scss';
 
+const root = document.getElementById('root') ?? document.getElementsByTagName('html')[0];
+
 interface Props {
     children: ReactNode
     onClose: Function
@@ -10,17 +13,18 @@ interface Props {
 
 export default function Popup({ children, onClose }: Props) {
     document.addEventListener('keydown', (e) => {
-        if(e.key === "Escape") {
+        if (e.key === "Escape") {
             onClose();
         }
     });
-    return (
+    return createPortal(
+
         <div className="popup-container">
             <div className="popup">
                 {children}
             </div>
             <div className="background" onClick={() => onClose()}></div>
-        </div>
+        </div>, root
     )
 }