React `ref` with `HOC`

App.jsx

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import InputField from "./FancyInput"; 

class App extends Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
    // this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <InputField ref={this.textInput} />
    );
  }
}

export default App;

FancyInput.jsx

import React from "react";

const TextInput = ({forwardRef, children, ...rest}) => {
  return (
    <div>
      <input ref={forwardRef} {...rest} />
      {children}
    </div>
  )
}

// HOC
const Input = InputComponent => {
  const forwardRef = (props, ref) => {
    const onType = (e) => console.log(ref.current.value);
    return <InputComponent forwardRef={ref} onChange={onType} {...props}/>
  }
  return React.forwardRef(forwardRef);
}

const InputField = Input(TextInput);

export default InputField;