Portal.tsx

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

interface PortalProps {
  children: ReactNode;
  id: string;
}

export default function Portal({ children, id }: PortalProps) {
  const elRef = useRef<HTMLElement>(null);

  function getElement() {
    if (!elRef.current) {
      // @ts-ignore
      elRef.current = document.createElement('div');
    }

    return elRef.current!;
  }

  useEffect(() => {
    const mountElement = document.getElementById(id);

    mountElement?.appendChild(getElement());

    return () => {
      mountElement?.removeChild(getElement());
      elRef.current?.remove();
    };
  }, [id]);

  return createPortal(children, getElement());
}