Error when upload file to ipfs in react js

Question

I trying to upload image to ipfs in react js UI. when add image using add button its work but when click on submit button get the next error "Uncaught (in promise) Error: Unexpected input: null normalise-candidate-single.js:16 " and then to store return hash from ipfs in hypeledger fabric

who can help me?

My App.js file as follow
**

import React, { Component } from 'react';
import './App.css';
import { create } from 'ipfs-http-client'

const ipfs = create('http://localhost:5001') 


class App extends Component {
   constructor(props) {
    super(props)
    this.state = {
      buffer: null
    }
  }
 
  
 captureFile = (event) => {
   event.preventDefault()
   //process file for IPFS...
   const file = event.target.files[0]
   const reader = new window.FileReader()
   reader.readAsArrayBuffer(file)
   reader.onloaded = () => {
     this.setState(('buffer', Buffer(reader.result)))
   }

 }
 onSubmit = (event) => {
   event.preventDefault()
   console.log("submiting the form....")
   ipfs.add(this.state.buffer, (error, result) => {
    console.log('Ipfs result', result)
    if(error) {
      console.error(error)
      return
    }
 })
}
 

  
      
      render() {
        return (
                                    
         
      <div>
        
        <div className="container-fluid mt-5">
          <div className="row">
            <main role="main" className="col-lg-12 d-flex text-center">
              <div className="content mr-auto ml-auto">
                 
                <h2>Change Logo</h2>
                <form onSubmit={this.onSubmit} >
                  <input type='file' onChange={this.captureFile} />
                  <input type='submit'/>
                </form>
              </div>
            </main>
          </div>
        </div>
      </div>
    );
  }
}
              
 export default App;
 

**