fix: rewrite DrawerPortal to use createRoot

Author: dziraf

src/frontend/components/app/drawer-portal.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, ReactNode, useState } from 'react'
-import { createPortal, render } from 'react-dom'
+import { createPortal } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Drawer, DEFAULT_DRAWER_WIDTH } from '@adminjs/design-system'
 import { ThemeProvider } from 'styled-components'
 
@@ -20,6 +21,30 @@ export type DrawerPortalProps = {
 }
 
 const DRAWER_PORTAL_ID = 'drawerPortal'
+const DRAWER_PORTAL_WRAPPER_ID = 'drawerPortalWrapper'
+
+const DrawerWrapper = ({ onMount }) => {
+  useEffect(() => {
+    onMount()
+  }, [])
+  return (
+    <ThemeProvider theme={(window as any).THEME}>
+      <Drawer id={DRAWER_PORTAL_ID} className="hidden" />
+    </ThemeProvider>
+  )
+}
+
+const createPortalContainer = (id: string) => {
+  let container = document.getElementById(id)
+
+  if (!container) {
+    container = window.document.createElement('div')
+    container.id = id
+    window.document.body.appendChild(container)
+  }
+
+  return container
+}
 
 /**
  * Shows all of its children in a Drawer on the right.
@@ -36,34 +61,39 @@ const DRAWER_PORTAL_ID = 'drawerPortal'
  * @subcategory Application
  */
 export const DrawerPortal: React.FC<DrawerPortalProps> = ({ children, width }) => {
-  const [drawerElement, setDrawerElement] = useState<HTMLElement | null>(
-    window.document.getElementById(DRAWER_PORTAL_ID),
-  )
-  if (!drawerElement && window) {
-    const innerWrapper = window.document.createElement('div')
-    const DrawerWrapper = (
-      <ThemeProvider theme={(window as any).THEME}>
-        <Drawer id={DRAWER_PORTAL_ID} className="hidden" />
-      </ThemeProvider>
-    )
-    window.document.body.appendChild(innerWrapper)
-    render(DrawerWrapper, innerWrapper, () => {
-      setDrawerElement(window.document.getElementById(DRAWER_PORTAL_ID))
-    })
+  const [drawerElement, setDrawerElement] = useState(document.getElementById(DRAWER_PORTAL_ID))
+
+  const handleDrawerMount = () => {
+    setDrawerElement(document.getElementById(DRAWER_PORTAL_ID))
   }
 
+  useEffect(() => {
+    const innerWrapperElement = createPortalContainer(DRAWER_PORTAL_WRAPPER_ID)
+    if (!drawerElement && window) {
+      const drawerRoot = createRoot(innerWrapperElement)
+      drawerRoot.render(<DrawerWrapper onMount={handleDrawerMount} />)
+    }
+
+    return () => {
+      const innerWrapper = document.getElementById(DRAWER_PORTAL_WRAPPER_ID)
+      if (innerWrapper) document.body.removeChild(innerWrapper)
+    }
+  }, [])
+
   useEffect(() => {
     if (drawerElement) {
       drawerElement.classList.remove('hidden')
       if (width) {
-        drawerElement.style.width = Array.isArray(width) ? width[0].toString() : width.toString()
+        drawerElement.style.width = Array.isArray(width)
+          ? width[0].toString()
+          : width.toString()
       }
       return (): void => {
         drawerElement.style.width = DEFAULT_DRAWER_WIDTH
         drawerElement.classList.add('hidden')
       }
     }
-    return (): void => undefined
+    return () => undefined
   }, [drawerElement])
 
   if (!drawerElement) {