Getting error while using Multipart/form-data when sending data using form

Question

Actually, I am creating a website using MERN where user as an admin can create data. For that I have created a form using react and trying to send the data. I am uploading files also like audio and images so I am making use of multipart/form-data and this is the part where I am getting a serious error. The error that I am getting is Boundary Not Found. The solution I got for the same is suggesting to remove the multipart/form-data and when I am implementing the suggested solution the form is not working. Please someone help me out with this.

Following is the Form data

/* eslint-disable react-hooks/rules-of-hooks */
import { useState } from "react"
import axios from 'axios'

const adminform = () => {

    const [adminform , setAdminform] = useState({
        CategoryName:"", EpisodeNo:"", EpisodeName:"", EpisodeDescription:"", imageurl:"", audiourl:""
    })

    let name , value;
    const handlechange = (e)=>{
    name = e.target.name
    value = e.target.value

    setAdminform({...adminform , [name]:value})
    }

    const onFormSubmit = async(e)=>{
        e.preventDefault()
        console.log('Hello')

        const {CategoryName, EpisodeNo, EpisodeName, EpisodeDescription, imageurl, audiourl} = adminform
        console.log(CategoryName, EpisodeNo, EpisodeName, EpisodeDescription, imageurl, audiourl)

        axios.post('http://localhost:4000/api/podcasts/uploadpodcast',{
            CategoryName, EpisodeNo, EpisodeName, EpisodeDescription, imageurl, audiourl
        }).then((res)=>{
            console.log(res)
        }).catch((err)=>{
            console.log(err)
        })
    }

  return (
    <>
    <form className="m-10" method="POST" action="/api/podcasts/uploadpodcast" encType="multipart/form-data">
        <div className="p-2 flex flex-col">
            <label htmlFor="CategoryName">Enter Category Name</label>
            <input 
            type="text" 
            name="CategoryName"
            onChange={handlechange}
            value={adminform.CategoryName}/>
        </div>
        <div className="p-2 flex flex-col">
            <label htmlFor="EpisodeNo">Enter Episode Number</label>
            <input 
            type="text" 
            name="EpisodeNo"
            onChange={handlechange}
            value={adminform.EpisodeNo}/>
        </div>
        <div className="p-2 flex flex-col">
            <label htmlFor="EpisodeName">Enter Episode Name</label>
            <input 
            type="text" 
            name="EpisodeName"
            onChange={handlechange}
            value={adminform.EpisodeName}/>
        </div>
        <div className="p-2 flex flex-col">
            <label htmlFor="EpisodeDescription">Enter Episode Description</label>
            <input 
            type="text" 
            name="EpisodeDescription"
            onChange={handlechange}
            value={adminform.EpisodeDescription}/>
        </div>
        <div className="p-2 flex flex-col">
            <label htmlFor="audiourl">Enter Audio</label>
            <input 
            type="file" 
            name="audiourl"
            onChange={handlechange}
            value={adminform.audiourl}/>
        </div>
        <div className="p-2 flex flex-col">
            <label htmlFor="imageurl">Enter Image</label>
            <input 
            type="file" 
            name="imageurl"
            onChange={handlechange}
            value={adminform.imageurl}/>
        </div>
        <button onClick={onFormSubmit}>Submit</button>
    </form>  
    </>
  )
}

export default adminform

As you can see in the above code I am using Axios.