import {createContext} from 'react'

export interface PortalContextInterface {
  element: HTMLElement
}

let globalElement: HTMLDivElement | null = null

const defaultContextValue = {
  get element() {
    if (globalElement) return globalElement
    globalElement = document.createElement('div')
    globalElement.setAttribute('data-portal', 'default')
    document.body.appendChild(globalElement)
    return globalElement
  }
}

export const PortalContext = createContext<PortalContextInterface>(defaultContextValue)

import {createContext} from 'react'

export interface PortalContextInterface {
  element: HTMLElement
}

export const PortalContext = createContext<PortalContextInterface | null>(null)

--- 
+++ 
@@ -4,4 +4,16 @@
   element: HTMLElement
 }
 
-export const PortalContext = createContext<PortalContextInterface | null>(null)
+let globalElement: HTMLDivElement | null = null
+
+const defaultContextValue = {
+  get element() {
+    if (globalElement) return globalElement
+    globalElement = document.createElement('div')
+    globalElement.setAttribute('data-portal', 'default')
+    document.body.appendChild(globalElement)
+    return globalElement
+  }
+}
+
+export const PortalContext = createContext<PortalContextInterface>(defaultContextValue)
[components] Add default value for PortalContext
