React portal

portal.tsx

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

interface Props {
  rootId: string;
  children: ReactNode;
}

export const Portal = ({ rootId, children }: Immutable<Props>) => {
  const elementRef = useRef(document.createElement('div'));

  useEffect(() => {
    const element = elementRef.current;
    // eslint-disable-next-line unicorn/prefer-query-selector
    const portalRoot = document.getElementById(rootId);

    if (!portalRoot) {
      throw new Error(`Element with id \`${rootId}\` does not exist in DOM.`);
    }
    portalRoot.append(element);

    return () => {
      element.remove();
    };
  }, [rootId]);

  return ReactDOM.createPortal(children, elementRef.current);
};