Updated data doesn't go to backend after submit. How do I handle this update method in Next JS?

I'm having problems making my update method work in Next js (it works fine in the backend). There is no errors but my guess is that the updated data isn't being sent to the backend correctly. I use formData for this, and it works fine in the models where I have images, but in this one where there's no files it doesn't seem to work. Would anyone have any idea where the issue might be? This is the code:

import { useState, useEffect } from 'react';
import Router from 'next/router';
import Link from 'next/link';
import { withRouter } from 'next/router';
import { getCookie, isAuth } from '../../../actions/auth';
import { singleAbout, updateAbout } from '../../../actions/about/about';

const AboutUpdate = ({ router }) => {

    const [values, setValues] = useState({
        missionTitle: '',
        missionDescription: '',
        error: '',
        success: '',
        formData: new FormData()
    });

    const { error, success, formData, missionTitle, missionDescription} = values;

    const token = getCookie('token');

    useEffect(() => {
        setValues({...values, formData: typeof window !== 'undefined' && new FormData()});
        initAbout();
    }, [router]);

    const initAbout = () => {
        if (router.query.slug){
            singleAbout(router.query.slug).then(data => {
                if (data.error) {
                    console.log(data.error);
                }else{
                    setValues({...values, missionTitle: data.missionTitle, missionDescription: data.missionDescription 
                 });
                }
            });
        }
    };



    const handleChange = name => e => {
        const value = e.target.value;
        formData.set(name, value);
        setValues({ ...values, [name]: value, formData, error: '' });
    };

    const editAbout = e => {
        e.preventDefault();
        updateAbout(formData, token, router.query.slug).then(data => {
            if (data.error) {
                setValues({ ...values, error: data.error });
            } else {
                setValues({ ...values, missionTitle: '', missionDescription:'', error: '', success: `About page is successfully updated` });
                if (isAuth()) {
                    Router.replace(`/admin/about/mission-vision/aboutManage`);
                } else if (isAuth() && isAuth().role === 0) {
                    Router.replace(`/user`);
                }
            }
        });
    };

    const showError = () => (
        <div className="alert alert-danger" style={{ display: error ? '' : 'none' }}>
            {error}
        </div>
    );

    const showSuccess = () => (
        <div className="alert alert-success" style={{ display: success ? '' : 'none' }}>
            {success}
        </div>
    );

    const updateAboutForm = () => {
        return (
            <form onSubmit={editAbout}>
               <div className="form-group">
                    <label className="text-muted">Mission Title</label>
                    <input type="text" className="form-control" value={missionTitle} onChange={handleChange('missionTitle')} />
                </div>

                <div className="form-group">
                    <label className="text-muted">Mision Description</label>
                    <input type="text" className="form-control" value={missionDescription} onChange={handleChange('missionDescription')} />
                </div>

                <div>
                    <button type="submit" className="formbtn me-3">
                        Update
                    </button>
                    <button className="formbtn">
                        <Link href="/admin/about/mission-vision/aboutManage">Cancel</Link>
                    </button>
                </div>
            </form>
        );
    };

    return (
        <div className="container-fluid pb-5">
            <div className="row">
                <div className="col-lg-9">
                    {updateAboutForm()} 
                    <div className="pt-3">
                        {showSuccess()}
                        {showError()}
                    </div>  
                <div>
            </div>
        </div>
        </div>
        </div>
    );
};

export default withRouter(AboutUpdate);
And from the actions/about:

export const singleAbout = slug => {
return fetch(`${API}/about/${slug}`, {
    method: 'GET'
})
    .then(response => {
        return response.json();
    })
    .catch(err => console.log(err));
};


export const updateAbout = (about, token, slug) => {
    return fetch(`${API}/about/${slug}`, {
        method: 'PUT',
        headers: {
            Accept: 'application/json',
            Authorization: `Bearer ${token}`
        },
        body: about
    })
        .then(response => {
            return response.json();
        })
        .catch(err => console.log(err));
};

I would appreciate anyone's help in this as I'm quite a beginner in Next and have no idea what I'm doing wrong. Thanks :)