Html react组件无法将文件识别为正确的类型

我正在尝试制作一个文件上载组件，用于将文件上载到我的react应用程序中的本地ipfs节点。它呈现在我调用它的组件中，但当我选择要上载的文件并按下提交按钮时，我在控制台中不断收到以下错误

Error: Unexpected input: object

我的组件是

import React, { Component, useEffect, useState } from "react";
import { Form, Col, Button, InputGroup } from 'react-bootstrap';
const IpfsHttpClient = require('ipfs-http-client')
const Buffer = require('buffer').Buffer;

// connect to the default API address http://localhost:5001

const UploadImage = () => {

  const [request, setRequest] = useState({});
  const [file, setFile] = useState({});
  const [img, setImg] = useState('');

  const handleSubmit =  async (event) => {
    event.preventDefault();
  //  const { cid } = await ipfs.add(img)
    const ipfs = new IpfsHttpClient();
    try {
      const file =  await ipfs.add(img)
    //  setFile(file)
       console.log(file)
     } catch (e) {
      console.error(e)
    }
  }

  const convertToBuffer = async(reader) => {
  //file is converted to a buffer for upload to IPFS
    const buffer = await Buffer.from(reader.result);
  //set this buffer -using es6 syntax
    setImg({buffer});
  };

  const captureFile =(event) => {
    event.stopPropagation()
    event.preventDefault()
    const file = event.target.files[0]
    let reader = new window.FileReader()
    reader.readAsArrayBuffer(file)
    reader.onload = function(e) { 
      convertToBuffer(reader)
    };
   };


  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label for="profile_pic">Choose file to upload</label>
           <div style={{ padding: '10px' }}><p>Enter your name:</p>
            <input
              type="file"
              name='img'
              onChange={captureFile}
              accept=".jpg, .jpeg, .png"
              required
            /></div>

        </div>
        <div>
        <input type='submit' value="Submit" />
        </div>
      </form>
    </div>
  )
}

export default UploadImage;