React portal component

portal.jsx

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const Portal = ({ children }) => {
  const [attachedToDom, setAttachedToDom] = useState(false);
  const el = useRef(null);

  useEffect(() => {
    el.current = document.createElement("div");
    document.body.appendChild(el.current);
    setAttachedToDom(true);

    return () => {
      document.body.removeChild(el.current);
    };
  }, []);

  return attachedToDom ? ReactDOM.createPortal(children, el.current) : null;
};

export default Portal;