Very simple React portal implementation with context

Portal.tsx

import { createContext, PropsWithChildren, useContext, useState } from 'react'
import { createPortal } from 'react-dom'

const PortalContext = createContext<HTMLDivElement | null>(null)

export const PortalContextProvider = ({ children }: PropsWithChildren) => {
    const [element, setElement] = useState<HTMLDivElement | null>(null)

    return (
        <>
            <div ref={setElement} />
            <PortalContext.Provider value={element}>{children}</PortalContext.Provider>
        </>
    )
}

export const usePortalContext = () => {
    const element = useContext(PortalContext)

    if (!element) {
        throw new Error('PortalContext must be used within a PortalContextProvider')
    }

    return element
}

export const Portal = ({ children }: PropsWithChildren) => {
    const element = usePortalContext()
    return createPortal(children, element)
}