Передайте ссылку из более высокого порядка в ReactJs

Question

Я хотел передать ссылку на создание в конструкторе HOC на обернутый компонент, но я изо всех сил пытаюсь заставить его работать.Я прочитал документацию ReactJ для этой части , но все еще не могу найти рабочий пример.

class FancyInput extends React.Component {

  constructor(props) {
    super(props)
    this.state = { name: 'Alice' };
    this.inputField = React.createRef();
  }

  handleClick = () => {
    console.log("WrappedComponent handleClick");
    const text = this.inputField.current.value.toLowerCase();
    this.setState({ name: text });
    this.props.onClick();
  }

  render() {
    return (
      <div>
        <p>Welcome {this.state.name}</p>
        <input ref={this.inputField} type="text" value={this.state.name} />
        <button onClick={this.handleClick}>OK</button>
      </div>
    );
  }
}

Я хочу, чтобы HOC изменил поведение с toLowerCase на toUpperCase

function upperCase(WrappedComponent) {
  class UpperCaseInput extends React.Component {

    constructor(props) {
      super(props)

      this.hocInputField = React.createRef();
    }

    handleClick = () => {
      console.log("HOC handleClick");
      const text = this.hocInputField.current.value.toUpperCase();
      //pass text down as props
    }

    render() {

      return (<WrappedComponent onClick={this.handleClick} />)
    }

    // render() {
    //   return (<WrappedComponent ref={this.inputField} onClick={this.handleClick} />)
    // }
  }

  // return React.forwardRef((props, ref) => {
  //   return <UpperCaseInput {...props} inputField={ref} />
  // });
  return (<UpperCaseInput />);

}

Как я могу прикрепить this.hocInputField к ссылке входного тега упакованного компонента и получить его значение (и манипулировать им, как я делаю это в FancyInput)?

Я оставил фрагменты кода, которые пытался заставить его работать, в комментарии.

Спасибо за помощь