Bug: componentDidMountCalled before ref is set about react HOT 3 OPEN

import React, { useRef, Component, forwardRef } from "react";

class Ex1 extends Component {
  render() {
    const { innerRef, children } = this.props;

    debugger;
    return (
      <div
        ref={(element) => {
          console.log(
            "This line is called after the componentDidMount in Ex2."
          );
          innerRef.current = element;
          debugger;
        }}
        className="ex1"
      >
        {children}
      </div>
    );
  }
}

class Ex2 extends Component {
  componentDidMount() {
    const { targetRef } = this.props;

    console.log("This line is hit before targetRef is set.");
    console.log(
      "Also it appears to be called twice. Once before the ref is set and once after."
    );

    debugger;
  }

  render() {
    const { innerRef } = this.props;

    debugger;
    return <div className="ex2">I do my own thing</div>;
  }
}

const Bar1 = forwardRef((props, ref) => {
  const { children } = props;

  debugger;
  return <Ex1 innerRef={ref}>{children}</Ex1>;
});

function Test() {
  const targetRef = useRef();

  debugger;
  return (
    <Bar1 ref={targetRef}>
      <Ex2 targetRef={targetRef} />
    </Bar1>
  );
}

export default Test;