Custom hook to get and use a container for React portals

example.jsx

const Notifications = () => {
  const { container, ref } = useModalParent<HTMLDivElement>();
  return (
    <div ref={ref}>
    // rest of code
        <Popover.Portal container={container}>
          // rest of code
        </Popover/>
    </div>
  )
}

useModalParent.ts

import { useRef, useState, useEffect } from "react";

//sometimes it can be an HTMLELement or an HTMLDivElement so let's make this generic

export function useModalParent<T extends HTMLElement | HTMLDivElement>(): {
  ref: React.RefObject<T>;
  container: T;
} {
  const [containerInstance, setContainerInstance] = useState<T>();
  const ref = useRef<T | null>(null);

  useEffect(() => {
    if (ref.current) {
      setContainerInstance(ref.current);
    }
  }, []);

  //am I sure that the dom element would be present at this point?
  let container = containerInstance as T;
  return { ref, container };
}