React ref current равен NULL

У меня этот код взят из официальных документов React Ref.

import React from "react";
import { render } from "react-dom";

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    // this.textInput.current.focus();
    console.info(this.textInput);
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type = "text"
          ref = {this.textInput} />

        <input
          type = "button"
          value = "Focus the text input"
          onClick = {this.focusTextInput}
        />
      </div>
    );
  }
}
const A = () => {
  return <div>
    <CustomTextInput />
  </div>
}
render(<div><A/></div>, document.getElementById("root"));

и когда вызывается focusTextInput, он регистрирует "current: null". Вот демонстрация: https://codesandbox.io/s/wo6qjk9xk7