React Portal that is mounted as soon as the target element appears in the DOM

portal.tsx

import { type PropsWithChildren, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

type PortalProps = PropsWithChildren & { targetId: string };

export function Portal({ children, targetId }: PortalProps) {
  const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);

  useEffect(() => {
    const updateTargetElement = () => {
      setTargetElement(document.getElementById(targetId));
    };

    updateTargetElement();

    const observer = new MutationObserver(() => {
      updateTargetElement();
    });

    observer.observe(document.body, { childList: true, subtree: true });

    return () => observer.disconnect();
  }, [targetId]);

  if (!targetElement) return null;

  return createPortal(children, targetElement);
}