Submit quill to form?

[redimongo]

I am having an issue with the React-Quill plugin, how do I send the encoded quill form to my FormData so that I can submit it to the form?

I have the following

import { useState } from 'react'
import Head from 'next/head'
import Image from 'next/image'
import Podcast from '.'
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';

var axios = require('axios');
/* TWITTER AND YOUTUBE AREA */

function PodcastUpload({ data }) {
  ////</>action='/api/podcasts/gupload'>
  const [value, setValue] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(document.getElementById("podcastupload"));
    const file = document.getElementById("file")
    data.append("file",file)

   var json =  JSON.stringify(Object.fromEntries(data.entries()));

    alert(json);

    console.log('You clicked submit.');
  }

    return (<>
        <h1>Upload New Episode</h1>
        <h2>{data}</h2>
        <form id="podcastupload" onSubmit={handleSubmit} >

          <input type="file" id="file" name="file" multiple></input>
          <input name="uuid" value="62569301efd5e89879d13b29"/>
          <input name="show_id" value="617414548b226e7231bfba5b"/>
          <input name="show_b" value="proptech"/>
          <input name="season" value="4"/>
          <input name="episode_no" value="40"/>
          <input name="title" value="test title"/>
          <ReactQuill  name="QuillDESC" value={value} onChange={setValue}/>
          <textarea name="description"></textarea>
          <input name="explicit" value="false"/>
          <input type="date" name="pubDate"/>

          <input type="submit"/>
        </form>
    </>)

}

export default PodcastUpload

export async function getServerSideProps({ params }) {
    console.log(params)
    // params contains the post `id`.
    // If the route is like /posts/1, then params.id is 1
    //const res = await fetch(`https://api.drn1.com.au/api-access/news/${params.slug}`)
    //const data = await res.json()
    //const currentU  = `https://www.drn1.com.au/news/${params.slug}`
    const data = params.podcastName;

    // Pass post data to the page via props
    return { props: { data } }
  }

  PodcastUpload.auth = true;

  PodcastUpload.getLayout = function getLayout(page) {
  return (
<>{page}</>
  )
}

However when I hit submit I don't see it in my alert which means it is not giving it a name value I tried to assign a name value but that did not work.

[ShafinShanto9]

can you find solution ??