React-Three-Renderer refs not current in componentDidUpdate (MVCE included)

I checked the source in react-three-renderer. In lib/React3.jsx, there is a two phased render.

componentDidMount() {    this.react3Renderer = new React3Renderer();    this._render();  }  componentDidUpdate() {    this._render();  }

The _render method is the one that seems to loads the children - the mesh objects within Three.

_render() {    const canvas = this._canvas;    const propsToClone = { ...this.props };    delete propsToClone.canvasStyle;    this.react3Renderer.render(      <react3        {...propsToClone}        onRecreateCanvas={this._onRecreateCanvas}      >        {this.props.children}      </react3>, canvas);  }

The render method draws the canvas and does not populate the children or invoke Three.

  render() {    const {      canvasKey,    } = this.state;    return (<canvas      ref={this._canvasRef}      key={canvasKey}      width={this.props.width}      height={this.props.height}      style={{        ...this.props.canvasStyle,        width: this.props.width,        height: this.props.height,      }}    />);  }

Summarizing, this is the sequence:

1. App Component render is called.
2. This renders react-three-renderer which draws out a canvas.
3. componentDidUpdate of App component is called.
4. componentDidUpdate of react-three-renderer is called.
5. This calls the _render method.
6. The _render method updates the canvas by passing props.children (mesh objects) to the Three library.
7. When the mesh objects are mounted, the respective refs are invoked.

This explains what you are observing in the console statements.