React portal in real life

Tooltips.js

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

const Portal = {
  open(ref) {
    this.ref = ref;
  },
  close() {
    this.ref = null;
  },
  component({ children }) {
    return this.ref ? ReactDOM.createPortal(
      children,
      this.ref
    ) : null;
  }
};

export default function Tooltips() {
  const tooltipRef = useRef();
  tooltipRef.current && Portal.open(tooltipRef.current);
  return <div ref={tooltipRef}>
    {/* Some layout */}
  </div>
}

export function PortalToTooltips(props) {
  return Portal.component(props);
}