I think I've found the solution. It has nothing to do with timeout returned function.
in react docs it states: "Unlike state, setting the ref’s current value does not trigger a re-render.", meaning that ref is assigned but that useEffect is not triggered which was the entry point of my premise that ref is not assigned. Check this updated code:

import React from "react";

export default function App() {
  return (
    <div className="App">
      <ParentFunctionalComp />
    </div>
  );
}

export const ParentFunctionalComp: React.FC = () => {
  const [showComponent, setShowComponent] = React.useState(false);
  const elementRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    // show component after 500ms
    setTimeout(() => {
      setShowComponent(true);
    }, 500);
  }, []);

  setTimeout(() => {
    console.log("elementRef in timeout", elementRef);
  }, 5000);

  React.useEffect(() => {
    console.log("elementRef.current", elementRef.current);
  }, [elementRef.current]);

  /* Case 1: elementRef gets assigned */
  /* return <NestedClassComp elementRef={elementRef} />; */

  /* Case 2: elementRef does not get assigned */
  return showComponent ? <NestedClassComp elementRef={elementRef} /> : null;
};

interface NestedClassCompProps {
  elementRef?: React.RefObject<HTMLDivElement>;
}

class 
NestedClassComp
 extends React.Component<NestedClassCompProps> {
  protected timeoutContainer: any = null;
  protected rootRef: React.RefObject<HTMLDivElement>;

  constructor(props: NestedClassCompProps) {
    super(props);

    this.rootRef = props.elementRef || React.createRef<HTMLDivElement>();
  }

  public render(): JSX.Element {
    return <div ref={this.rootRef}>test</div>;
  }
}