React portals as they were in my head before learning how createPortal actually works

portal.jsx

import { render } from "react-dom";
import { atom, useAtom } from "jotai";
import { useEffect, useState } from "react";

const portalGun = () => {
  const Children = atom(null);

  const EntryPortal = ({ children }) => {
    const [, setChildren] = useAtom(Children);

    useEffect(() => {
      setChildren(children);
    }, [setChildren, children]);

    return null;
  };

  const ExitPortal = () => {
    const [children] = useAtom(Children);

    return <>{children || null}</>;
  };

  return [EntryPortal, ExitPortal];
};

const [Orange, Blue] = portalGun();

const App = () => (
  <div className="App">
    <Blue />

     Boundary

    <Orange>XXXXXX</Orange>
  </div>
);

render(<App />, document.getElementById("root"));