Portal.tsx

import React, {useRef, useEffect} from 'react'
import {createPortal} from 'react-dom'

type PortalProps = {
  children: React.ReactNode
}

function Portal({children}: PortalProps): JSX.Element {
  const modalContainer = document.body
  const modalElementRef = useRef<HTMLDivElement>()

  function getModalElement(): HTMLDivElement {
    if (!modalElementRef.current) {
      modalElementRef.current = document.createElement('div')
    }

    return modalElementRef.current
  }

  useEffect(() => {
    const modalElement = getModalElement()

    modalContainer.appendChild(modalElement)

    return (): void => {
      modalContainer.removeChild(modalElement)
    }
  }, [])

  return createPortal(children, getModalElement())
}