Getting a 500 error when send a post request from my React app using Multer

Question

I cannot figure out why this is not working. I am trying to figure out a way to upload an array of images to a MongoDB document, and later download said images (along with other info from the document). for some reason I keep getting a 500 error when I hit the particular POST endpoint but don't get any error when hitting a separate GET endpoint that gets the documents. I have copied the same strategies I have seen in other Stack Overflow posts and guides, but it never seems to work.

Here is my router file. for now I have only put console logs in the post endpoint because I want to see that I am actually getting the files before I decide how to handle them for my use case.

const express = require("express");
var router = express.Router();
const multer = require("multer");
const { GridFsStorage } = require("multer-gridfs-storage");
require("dotenv").config();
const url = process.env.MONGO_URL


const storage = new GridFsStorage({
  url: url,
  file: (req, file) => {
    if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
      return {
        bucketName: "photos",
        filename: `${Date.now()}_${file.originalname}`,
      };
    } else {
      //Otherwise save to default bucket
      return `${Date.now()}_${file.originalname}`;
    }
  }
})
const upload = multer({storage: storage})
router.post("/api/test",upload.array("images"), async (req, res) => {
  try{
    console.log("endpoint hit")
    console.log(req.files)
  }catch(err){
    console.log(err)
  }

Here is the form in React that I am getting the data from

function UploadProduct() {
    const [formData, setFormData] = useState({
        category: "",
        productName: "",
        productDescription: "",
        quantity: "",
        price: "",
        pictures: [],
      });


    const handleChange = (e) => {
        const { name, value } = e.target;

        if (e.target.type === "file") {
          const newPictures = Array.from(e.target.files);
          setFormData({ ...formData, pictures: [...pictures, ...newPictures] });
        } else {
          setFormData({ ...formData, [name]: value });
        }
      };

    return (
        <div className="Upload">
          <h1>Add a New Product</h1>
          <form
            action="/api/test"
            method="post"
            encType="multipart/form-data"
            name="images"
          >
            <div>
              <label htmlFor="category">Category:</label>
              <input
                type="text"
                id="category"
                name="category"
                value={category}
                onChange={handleChange}
              />
            </div>
            <div>
              <label htmlFor="productName">Product Name:</label>
              <input
                type="text"
                id="productName"
                name="productName"
                value={productName}
                onChange={handleChange}
              />
            </div>
            <div>
              <label htmlFor="productDescription">Product Description:</label>
              <textarea
                id="productDescription"
                name="productDescription"
                value={productDescription}
                onChange={handleChange}
              />
            </div>
            <div>
              <label htmlFor="quantity">Quantity:</label>
              <input
                type="number"
                id="quantity"
                name="quantity"
                value={quantity}
                onChange={handleChange}
              />
            </div>
            <div>
              <label htmlFor="price">Price:</label>
              <input
                type="number"
                id="price"
                name="price"
                value={price}
                onChange={handleChange}
              />
            </div>
            <div>
              <label htmlFor="pictures">Pictures:</label>
              <input
                type="file"
                id="pictures"
                name="pictures"
                multiple
                onChange={handleChange}
              />
            </div>
            <button type="submit">Submit</button>
          </form>
        </div>
    )

}

Here is the errror I get whenever I submit the form. I have also tried going into postman and setting up a body as "form-data" and get the same error all with a 500 code

Unexpected field
    MulterError: Unexpected field
        at wrappedFileFilter (C:\Users\aolad\Documents\Skintastic\skintastic-node- 
   api\node_modules\multer\index.js:40:19)
        at Busboy.<anonymous> (C:\Users\aolad\Documents\Skintastic\skintastic-node- 
   api\node_modules\multer\lib\make-middleware.js:115:7)
        at Busboy.emit (node:events:513:28)
        at Busboy.emit (C:\Users\aolad\Documents\Skintastic\skintastic-node- 
   api\node_modules\busboy\lib\main.js:38:33)
        at PartStream.<anonymous> (C:\Users\aolad\Documents\Skintastic\skintastic-node- 
   api\node_modules\busboy\lib\types\multipart.js:213:13)
        at PartStream.emit (node:events:513:28)
        at HeaderParser.<anonymous> (C:\Users\aolad\Documents\Skintastic\skintastic-node- 
   api\node_modules\dicer\lib\Dicer.js:51:16)
        at HeaderParser.emit (node:events:513:28)
        at HeaderParser._finish (C:\Users\aolad\Documents\Skintastic\skintastic-node- 
   api\node_modules\dicer\lib\HeaderParser.js:68:8)
        at SBMH.<anonymous> (C:\Users\aolad\Documents\Skintastic\skintastic-node- 
   api\node_modules\dicer\lib\HeaderParser.js:40:12)

finally this is what is in the terminal after

Edit

After changing the field name in the "upload.array()" statement to pictures, I start to get a different error

C:\Users\my-user\my-app-path\node_modules\multer-gridfs-storage\lib\gridfs.js:306
                        id: f._id,
                              ^

TypeError: Cannot read properties of undefined (reading '_id')
    at GridFSBucketWriteStream.emitFile (C:\Users\my-user\my-app-path\node_modules\multer-gridfs-storage\lib\gridfs.js:306:31)
    at GridFSBucketWriteStream.emit (node:events:525:35)
    at finish (node:internal/streams/writable:748:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

not sure where f._id is being read though