React ref that depends by an element's reference does not get passed to the child components

The following code creates an object ref that's called editor, but as you see it depends by the contentDiv element that's a ref to a HTMLElement. After the editor object is created it needs to be passed to the TabularRibbon. The problem is that the editor is always null in tabular component. Even if I add a conditional contentDiv?.current, in front of this, it still remains null...

Anyone has any idea?

export const Editor = () => {    let contentDiv = useRef<HTMLDivElement>(null);    let editor = useRef<Editor>();    useEffect(() => {        let options: EditorOptions = { };        editor.current = new Editor(contentDiv.current, options);        return () => {            editor.current.dispose();        }    }, [contentDiv?.current])    return (<div ><TabularRibbon                    editor={editor.current}                /><div  ref={contentDiv} />          ..........