Update method doesn't work in frontend (Next.js) How do I handle this correctly in the frontend?

I'm building a simple application using Next Js, Node Js, and Mongo db. I've build this update method that works in the backend, but am struggling to handle it in the frontend since I'm pretty much a beginner in Next Js. Am I handling it wrong? I'd appreciate any help. Here's my 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'm pretty stuck here. Thank you to anyone who is willing to help! :)