Portals in nextJS

layout-popup.tsx

export const LayoutPopup = <T extends unknown>({
  library,
}: {
  library: Record<keyof T, ComponentType<any>>;
}): JSX.Element => {
  const modalRoot = useCreateDomElement();
  return (
    <>
      {modalRoot &&
        createPortal(<PopupContainer<T> library={library} />, modalRoot)}
    </>
  );
};

use-create-dom-element.ts

import { useEffect, useState } from "react"

export function useCreateDomElement() {
	const [domElement, setDomElement] = useState<HTMLDivElement | null>(null)

	useEffect(() => {
		const element = document.createElement("div")
		document.body.appendChild(element)
		setDomElement(element)

		return () => {
			document.body.removeChild(element)
		}
	}, [])

	return domElement
}