مشكلة الصور في mongodb

لدي نموذج في قاعدة بيانات mongo  هذا هو 

/**
 * Module dependencies.
 */
const mongoose = require("mongoose");
/**
 * Schema definition
 */

const ModelSchema = new mongoose.Schema(
  {
    name: {
      type: String,
      required: true,
      unique: true,
    },
    pathname:{
      type: String,
      required: true,
      unique: true,
    },
    title: {
      type: String,
      unique: true,
      default: function() {
        return this.name;
      }
    },
    desc: {
      type: Array,
      required: true,
      default:[""]
    },
    image: {
       data: Buffer, 
      contentType:String  
    },
  },
  {
    timestamps: true,
  }
);

ModelSchema.set("toJSON", {
  virtuals: true,
  versionKey: false,
  transform: (doc, ret) => {
    delete ret._id;
  },
});

const Model = mongoose.model("MainCategory", ModelSchema);

module.exports = Model;

اريد ارسال الصور له عبر صفحة react 

import React, { useEffect, useState } from 'react'
import { AppFooter, AppHeader, AppSidebar, DocsExample } from '../../../components'
import axios from 'axios'
import { CButton, CForm, CFormInput, CFormLabel, CFormTextarea } from '@coreui/react'
export default function programs() {
  const [name, setname] = useState('')
  const [image, setimage] = useState(null)
  const [pathname, setpath] = useState('')
  const [title, settitle] = useState()
  const handleImageChange = (e) => {
    const file = e.target.files[0];
  	const formData = new FormData();
    formData.append("image", file);
    setimage(formData);
  };
  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      await axios.post('https://api.wesamelnagah.com/api/maincategory', {
        name,
        pathname,
        image,
        headers: {
          "Content-Type": "multipart/form-data",
        },
        // title
      })
      await axios.post('https://api.wesamelnagah.com/api/uplode',image, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      setname('')
      setimage(null)
      setpath('')
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <div className="programs_container">
      <AppSidebar />
      <div className="wrapper d-flex flex-column min-vh-100">
        <AppHeader />
        <div className="body flex-grow-1">
          <CForm onSubmit={handleSubmit}>
            <div className="mb-3">
              <CFormLabel htmlFor="exampleFormControlInput1"> عنوان الباقة</CFormLabel>
              <CFormInput
                type="text"
                id="exampleFormControlInput1"
                onChange={(e) => setname(e.target.value)}
              />
              <CFormLabel htmlFor="exampleFormControlInput1"> مسار الباقة</CFormLabel>
              <CFormInput
                type="text"
                id="exampleFormControlInput1"
                onChange={(e) => setpath(e.target.value)}
              />
            </div>
            <div className="mb-3">
              <CFormLabel htmlFor="formFile">صورة الباقة</CFormLabel>
              <CFormInput type="file" id="formFile" onChange={handleImageChange} />
            </div>
            <div className="d-grid gap-2 col-6 mx-auto">
              <CButton color="primary" type="submit">
                Submit
              </CButton>
            </div>
          </CForm>
        </div>
        <AppFooter />
      </div>
    </div>
  )
}

هل يستطيع احد مساعدتي للقيام بذلك