I created a simple image uploader component that is rendered in a new-image-form that extends a form. but when handling a change(an image upload), the state is updated with an empty opbject (and not with the file object). I tried to debug it but anything goes right until this.setState. Can anyone helps?

NewImagesForm : 

```
class NewImagesForm extends Form {
  state = {
    data: {
      _id: 0,
      name: "",
      file: null,
    },
    errors: {},
    apiEndpoint: "",
  };

  render() {
    return (
      <div className="new-menu-item-form">
        <form onSubmit={this.handleSubmit}>
          {this.renderInput("name", "Name")}
          {this.renderUploadFile("file", "Upload")}
          {this.renderButton("Add")}
        </form>
      </div>
    );
  }

```

Form 

```
class Form extends Component {
  state = { data: {}, errors: {} };

  handleFileUpload = (e) => {
    const data = { ...this.state.data };
    data[e.currentTarget.name] = e.target.files[0];
    this.setState({ data });
  };

  renderUploadFile(name, label) {
    const { data } = this.state;

    return (
      <UploadImage
        name={name}
        label={label}
        value={data[name]}
        onChange={this.handleFileUpload}
      ></UploadImage>
    );
  }
}

```

export default Form;

File Upload Component

```
const UploadImage = ({ name, label, error, onChange }) => {
  return (
    <div className="input-group">
      <div className="custom-file">
        <input
          type="file"
          onChange={onChange}
          className="custom-file-input"
          id={name}
          name={name}
        ></input>
        {label && (
          <label className="custom-file-label" htmlFor={name}>
            {label}
          </label>
        )}
      </div>
      <div className="input-group-append">
        <button className="btn btn-outline-secondary" type="button">
          Button
        </button>
      </div>
    </div>
  );
};

export default UploadImage;

```