How to create register use multer with MERN

Question

I built a register used Multer to upload image to cloudinary and used an API to frontend, When i'm submit console displays MulterError: Unexpected field when I tested on Postman it work, I guess the problem is about API.

//front-end

    const handleRegister = async (event) => {
    event.preventDefault();
    const data = new FormData(formRef.current);
    if (selectedFile) {
      data.append("image", selectedFile);
    }
    try {
      await register(data);
    } catch (error) {
      console.error(error);
    }
  };
  
  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

 <input
   name="image"
   hidden
   accept="image"
   type="file"
   placeholder="Select file"
   onChange={handleFileChange}           
     />

//Api.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_BASE_URL }),
    reducerPath: "adminApi",
    tagTypes: [ "Auth"
    ],

    endpoints: (build) => ({
      register: build.mutation({
        query: (formData) => ({
          url: "/auth/register",
          method: "POST",
          body: formData,
        }),
      }),
      login: build.mutation({
        query: ({ email, password }) => ({
          url: 'auth/login',
          method: 'POST',
          body: { email, password },
        }),
    }),
});

export const { useRegisterMutation, useLoginMutation } = api;

//routes.js

import express from "express";
import { login, register, uploadImage} from "../controller/authController.js";
import { parser } from "../config.js";

const router = express.Router();

router.post("/upload", parser.single("image"), uploadImage);
router.post("/register", parser.single("image"), register);
router.post("/login", login);

export default router;

//Controller.js

import Admin from "../models/admin.js"
import bcrypt from "bcrypt";
import jwt from "jsonwebtoken";
import { parser } from "../config.js";


export const register = async (req, res) => {
  try {
    const { firstname, lastname, password, email, type, public_id } = req.body;

    // Check if the user already exists
    const existingUser = await Admin.findOne({ email });
    if (existingUser) {
      return res.status(400).json({ message: "User already exists" });
    }

    const newUser = new Admin({
        firstname,
        lastname,
        password,
        email,
        role: type,
        public_id: req.file.path,
      });

    await newUser.save();

    res.status(201).json(newUser);
  } catch (error) {
    res.status(500).json({ message: "Something went wrong", error: error.message });
  }
};

export const uploadImage = async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ message: "No image file provided" });
    }

    const image = req.file;

    res.status(201).json({ image });
  } catch (error) {
    res.status(500).json({ message: "Something went wrong" });
  }
};

//config.js

import cloudinary from "cloudinary";
import { CloudinaryStorage } from "multer-storage-cloudinary";
import multer from "multer";

cloudinary.v2.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

const storage = new CloudinaryStorage({
  cloudinary: cloudinary.v2,
  params: {
    folder: "test1",
    format: async (req, file) => 'jpg', // supports promises as well
  },
});

const fileFilter = (req, file, cb) => {
  const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];

  if (!allowedTypes.includes(file.mimetype)) {
    const error = new Error("Incorrect file type");
    error.code = "INCORRECT_FILETYPE";
    return cb(error, false);
  }
  cb(null, true);
}

export const parser = multer({ storage: storage, fileFilter: fileFilter });

this is my code what's wrong, how can I fix it?