Draft.js data is not sent to the server in React

Question

I am using Draft.js editor for my project which is linked with a <textarea> where data from the editor is converted into Html so I have encountered a problem that whenever I click the Submit button, the console shows description data to be empty hence server throws an error Please Fill all required field

Add.js

import { TextField } from '@material-ui/core';
import React, { useState, useContext } from 'react';
import styled from 'styled-components';
import { UserContext } from '../../context/UserContext';
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html'
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function Add() {


    const [editorState, setEditorState] = useState(
        () => EditorState.createEmpty(),
      );
      const handleEditorChange = (state) => {
        setEditorState(state);
      }


    const {AddArticle, wait} = useContext(UserContext);
    const [errMsg, setErrMsg] = useState(false);
    const [successMsg, setSuccessMsg] = useState(false);
    const [formData, setFormData] = useState({
        ar_title: '',
        description: ''
    });

  
    const onChangeInput = (e) => {
        setFormData({
            ...formData,
            [e.target.name]:e.target.value
        })
        if (e.target.files && e.target.files.length > 0) {
            setSelectedImage(e.target.files[0]);
        }
    }
  
    const submitForm = async (e) => {
        e.preventDefault();
        console.log(formData);
        const data = await AddArticle(formData);
        if(data.success){
            e.target.reset();
            setSuccessMsg('Your Article has been recieved!');
            setErrMsg(false);
        }
        else if(!data.success && data.message){
            setSuccessMsg(false);
            setErrMsg(data.message);
        }
        
    }
    

  return (
<Adding>
      <div className="heroInner">
        <form className='form' onSubmit={submitForm}>
            <h1>Create Content</h1>
            <h3 className='mb-2'>Title</h3>
            <TextField name='ar_title' value={formData.ar_title} onChange={onChangeInput} id="outlined-basic" label="Title of the Post" variant="outlined" className='field' />
        <h3 className='mb-2 mt-10'>Description</h3>
        <Editor
            editorState={editorState}
            onEditorStateChange={handleEditorChange}
            wrapperClassName="wrapper-class"
            editorClassName="editor-class"
            toolbarClassName="toolbar-class"   
         />
        <textarea
          disabled
          value = {formData.description}
          onChange={[formData.description][draftToHtml(convertToRaw(editorState.getCurrentContent()))]}
          name="description"
        />
        <input
            className='btn-v'
            type="submit"
            disabled={wait}       
        />
        {errMsg && <div className="err-msg">{errMsg}</div>}
        {successMsg && <div className="success-msg">{successMsg}</div>}
        </form>
      </div>
    </Adding>
  );
}
const Adding = styled.section`
    .success-msg,
    .err-msg {
      color: #dc3545;
      font-family: Nunito Sans;
      margin-top: 2vh;
  }
  .success-msg {
    color: #20c997;
  }
  .wrapper-class {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 1vh;
    overflow: auto;
    width: 67vw;
  }
  .editor-class {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 1vh;
  }
  .toolbar-class {
    border: 1px solid #ccc;
    border-radius: 1vh;
  }
`

UserContext.js

import {createContext, useState, useEffect} from 'react'
import axios from 'axios'

export const UserContext = createContext();

export const Axios = axios.create({
    baseURL: 'http://localhost/project69/',
});

export const UserContextProvider = ({children}) => {

    const [wait, setWait] = useState(false);

    const AddArticle = async ({ar_title,description}) => {
        setWait(true);
        try{
            const {data} = await Axios.post('ArticleR.php',{
                ar_title,
                description
            });
            setWait(false);
            console.log(data);
            return data;
        }
        catch(err){
            setWait(false);
            return {success:0, message:'Server Error!'};
        }
    }
    return (
        <UserContext.Provider value={{AddArticle}}>
            {children}
        </UserContext.Provider>
    );