React Hook Portal

 import React, {useEffect, useRef} from 'react';

import ReactDOM from 'react-dom';

interface Props {

    children: React.ReactNode;

}

export function Portal (props: Props): JSX.Element {

    const container: React.MutableRefObject<HTMLDivElement> = useRef<HTMLDivElement>(document.createElement('div'));

    useEffect(function (): () => void {

        document.body.appendChild(container.current);

        const elementForRemoval: HTMLDivElement = container.current;

        return function (): void {

            document.body.removeChild(elementForRemoval);

        };

    }, [container]);

    return ReactDOM.createPortal(props.children, container.current);

}

interface DialogProps {

    open: boolean;

    children?: React.ReactNode;

}

export function Dialog (props: DialogProps): JSX.Element {

    if (props.open) {

        return (

            <Portal>

                <div>{props.children}</div>

            </Portal>

        );

    } else {

        return null;

    }

}