Passing data by context (HOC) React

Question

Good, I’m doing a form system in React. I’m using the context to pass some information to the child components. The structure of the project is as follows:

/context - Where I’ve been saving the context

import React from "react";
const FormContext = React.createContext();
export { FormContext };

/Form js. - Main component

import React, { Component } from "react";
import { FormContext } from "./context/index";

export default class Form extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <FormContext.Provider values={{ value: "teste" }}>
        {this.props.children}
      </FormContext.Provider>
    );
  }
}

withFormContext.js - HOC to pass context

import React from "react";
import { FormContext } from "../context/index";
const withFormContext = Component => (
  <FormContext.Consumer>
    {({ controller }) => <Component controller={controller} {...this.props} />}
  </FormContext.Consumer>
);

export default withFormContext;

/Textinput.js - Text element of the form

import React from "react";
import { withFormContext } from "../HOC/withFormContext";

const TextInput = ({ ...props }) => {
  console.log(props);
  return <input type="text" />;
};
export default withFormContext(TextInput);

App.js - Component that will call the form

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Form from "./libs/forms/Form";
import TextInput from "./libs/forms/components/TextInput";

class App extends Component {
  render() {
    return (
      <div className="container">
        <Form nameForm="xxxxx">
          <TextInput />
        </Form>
      </div>
    );
  }
}

It turns out I can’t pass the properties to the component Textinput.js through HOC. Can you help me or in your opinion what I should use in this type of situation?