POST Request works on POSTMAN but fails on my React

Question

Hello so I have a Django API whereby I have the following in my DB:

• lecturer
• module
• video
• date

So when I make a POST request to create another entry to my DB with POSTMAN everything works just fine leaving me to believe that my API is definitely handling everything properly.

So now when I try to make a POST request on my client-side when I submit the data I get the following error: [*] Error: {'video': [ErrorDetail(string='The submitted data was not a file. Check the encoding type on the form.', code='invalid')]}

So I honestly do not know where I could be going wrong with how I am handling this request can I please get assistance with regards to this matter.

Code below: ReactJS code how I tried to handle this POST request

class VideoUploadForm extends Component{

    constructor(props){
        super(props);

        this.state = {

            lecturer: '',
            module: '',
            video: null,
            date: ''
        }

        this.handleChange = this.handleChange.bind(this);
        this.uploadVideo = this.uploadVideo.bind(this);
    }


    handleChange = (e) =>{

        this.setState({

            [e.target.id] : e.target.value
        });
    }




    uploadVideo = (e) => {

        e.preventDefault();
        let form_data = new FormData();
        form_data.append('lecturer', this.state.lecturer);
        form_data.append('module', this.state.module);
        form_data.append('video', this.state.video);
        form_data.append('date', this.state.date);
        let url = 'http://127.0.0.1:8000/api/upload-lecture/';
        axios.post(url, form_data, {
          headers: {
        
            'Accept':'application/json',
            'content-type': 'application/json'
          }
        })
            .then(res => {
              console.log(res.data);
           })
            .catch(err => console.log(err))
    };





    render(){

        return(

            <div className="form__container">
            
                <form className="form__items" onSubmit={this.uploadVideo}>

                    <label>
                        Lecturer:
                        <input type="text" id="lecturer" onChange={this.handleChange} required/>  
                    </label>

                    <label>
                        Module: 
                        <input type="text" id="module" onChange={this.handleChange}  required/>  
                    </label>

                    <label>
                        Video: 
                        <input type="file" id="video" accept="video/*" onChange={this.handleChange} required/>  
                    </label>

                    <label>
                        Date: 
                        <input type="text" onChange={this.handleChange} required/>  
                    </label>

                    <input type="submit" value="Upload Video" onSubmit={this.uploadVideo} required/>
            
            
                </form>
            
        
            </div>
        )
    }
}

export default VideoUploadForm;


@api_view(['POST'])
def videoUpload(request):

    parser_classes = (JSONParser, FormParser, MultiPartParser)
    serializer = LectureVideosSerializer(data=request.data)

    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data)

    else:
        print("[*] Error: " + str(serializer.errors))
    return Response(serializer.data)

What am I am doing wrong with this implementation here of making a POST request?

I have checked one similar Question on stackoverflow but when I tried to implement the solution that was given and worked for the other person to me my errors were still consitant never changed