Can’t solve MulterError: Unexpected field in react/express

I tried to send img file and other text information from React to Express server, save img in aws S3 using multer as middleware, and save img url from S3 and other inform in server DB.
I keep getting MulterError: Unexpected field error while I try upload.single or upload.array in multer or change the Content-type etc… I’ve been trying for hours, now I don’t even know how to modify it.
The way to S3 access is to use access/secret access key in .env as an IAM user.

my react side code

const Item = () => {
  
  const {
 
    register,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm({
    defaultValues: {
      itemName: "",
      imgs: null,
      webpImgs: null,
      price: null,
      category: "",
      brand: "",
      sale: null,
    },
  });

  const onSubmit = async (data) => {
  
    const formData = new FormData();
 
    var sumFile = document.querySelector("#sumFile");
    formData.append("sumFile", sumFile?.files[0]);
 
    const blob = new Blob([data], {
      type: "application/json",
    });
    formData.append("info", blob);

    try {
      addItem(formData).then(async (res) => {
        if (res.status === 200) {
          alert("test");
        } else {
          alert("fail");
        }
      });
    } catch (err) {
      return err;
    }
  };

  return (
    <form className="user-form" onSubmit={handleSubmit(onSubmit)}>
      <select {...register("category")}>
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
      </select>
      <select {...register("type")}>
        <option value="Short">Short</option>
        <option value="Long">Long</option>
        <option value="Dress">Dress</option>
      </select>

      <input {...register("itemName")} placeholder="itemName" />
      <input
        {...register("file")}
        type="file"
        name="sumFile"
        id="sumFile"
        accept="image/*"
      />
      <input {...register("price")} placeholder="price" />
      <input {...register("brand")} placeholder="brand" />
      <input {...register("sale")} placeholder="sale" />

      <button disabled={isSubmitting}>Add</button>
    </form>
  );
};

express code. I wanted to pass img url to next function here but couldn’t try bc I haven’t saved img to S3 yet.

const express = require("express");
const router = express.Router();
const item = require("../controllers/item");
const { S3Client} = require("@aws-sdk/client-s3");
const dotenv = require("dotenv");
const multer = require("multer");
const multerS3 = require("multer-s3");
const s3 = new S3Client();
dotenv.config();

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: "bucket name",
    metadata: function (req, file, cb) {
      cb(null, { fieldName: file.fieldname });
    },
    key: function (req, file, cb) {
      cb(null, Date.now().toString());
    },
  }),
});

router.post("/additem", upload.array("sumFile", 2), function (req, res, next) {
  console.log(req.files);
  res.status(200).send("Successfully uploaded ");
});


module.exports = router;

in network req payload

——WebKitFormBoundaryJxBVt4RCvqhg3w9L Content-Disposition: form-data; name=”sumFile”; filename=”a.png” Content-Type: image/png

——WebKitFormBoundaryJxBVt4RCvqhg3w9L Content-Disposition: form-data; name=”info”; filename=”blob” Content-Type: application/json

error detail

Unexpected field MulterError: Unexpected field
at wrappedFileFilter (/Users/home/self/backtest/server/node_modules/multer/index.js:40:19)
at Multipart. (/Users/home/self/backtest/server/node_modules/multer/lib/make-middleware.js:107:7)
at Multipart.emit (node:events:513:28)
at HeaderParser.cb (/Users/home/self/backtest/server/node_modules/busboy/lib/types/multipart.js:358:14)
at HeaderParser.push (/Users/home/self/backtest/server/node_modules/busboy/lib/types/multipart.js:162:20)
at SBMH.ssCb [as _cb] (/Users/home/self/backtest/server/node_modules/busboy/lib/types/multipart.js:394:37)
at feed (/Users/home/self/backtest/server/node_modules/streamsearch/lib/sbmh.js:219:14)
at SBMH.push (/Users/home/self/backtest/server/node_modules/streamsearch/lib/sbmh.js:104:16)
at Multipart._write (/Users/home/self/backtest/server/node_modules/busboy/lib/types/multipart.js:567:19)
at writeOrBuffer (node:internal/streams/writable:392:12)