Create React Portal via Ref - reactjs

Question

I would like to create a Portal component that is supposed to be attached to it's container component, but not via the container's ID but by it's ref. In other words, I don't want to pass document.getElementById('CONTAINER_ID') as the second argument to the ReactDOM.createPortal function but to rely solely on the ref of the container being passed by React.forwardRef.
Is there a straightforward method of achieving this ?
Else maybe I would need to create a dom node "attached" to the ref first and than pass the node to the
createPortal function as the second argument ? I would like to avoid assigning the ids as much as possible. Here is the example code (I work in TypeScript) :
export default React.forwardRef<HTMLDivElement, Props>( (Props, ref) =>{
const {state, options, dispatch} = Props
if(!state.open) return null
return ReactDOM.createPortal(
<div
className={css`
height: 140px;
background: white;
overflow-y: scroll;
position: absolute;
width:100%;
`}
>
{options}
</div>,
ref.current // <-- THIS DOESN'T WORK
)
}
)

Answer 1

forwardRef is used when the parent component needs to get access to the child's element, not the other way around. To pass an element down to a child you'll do it through a prop. Also, since refs aren't populated until after the first render, you may need to render the parent component twice, once to put the container on the page, and then again to pass it to the child so the child can create a portal.
const Parent = () => {
const ref = useRef<HTMLDivElement>(null);
const [element, setElement] = useState<HTMLDivElement | null>(null);
useEffect(() => {
// Force a rerender, so it can be passed to the child.
// If this causes an unwanted flicker, use useLayoutEffect instead
setElement(ref.current);
}, []);
return (
<div ref={ref}>
{element && (
<Child element={element} {/* insert other props here */} />
)}
</div>
)
}
const Child = (props: Props) => {
const { state, options, dispatch, element } = props;
if (!state.open) {
return null;
}
return ReactDOM.createPortal(
<div
className={css`
height: 140px;
background: white;
overflow-y: scroll;
position: absolute;
width: 100%;
`}
>
{options}
</div>,
element
);
}