перепиши следующий код для серверной формы next js

код:import React, { useState } from 'react';
import EmployeeDataService from "../../services/employees.service";
import { Navigate } from 'react-router-dom';
import MDEditor from '@uiw/react-md-editor';
import { connect } from "react-redux";

function AddEmployee() {

    const [employee, setEmployee] = useState({
        first_name: "",
        patronymic: "",
        last_name: "",
        degree: "",
        rank: "",
        role: "сотрудник",
        description: "",
        image: ""
    });

    const [submitted, setSubmitted] = useState(false);


    function handleChangeFirst_Name(ev) {
        setEmployee({
            ...employee,
            first_name: ev.target.value
        });
    }

    function handleChangePatronymic(ev) {
        setEmployee({
            ...employee,
            patronymic: ev.target.value
        });
    }

    function handleChangeLast_Name(ev) {
        // console.log(ev)
        setEmployee({
            ...employee,
            last_name: ev.target.value
        });
    }


    function handleChangeDegree(ev) {
        setEmployee({
            ...employee,
            degree: ev.target.value
        });
    }

    function handleChangeRank(ev) {
        setEmployee({
            ...employee,
            rank: ev.target.value
        });
    }

    function handleChangeRole(ev) {
        setEmployee({
            ...employee,
            role: ev.target.value
        });
    }

    function handleChangeDescription(ev) {
        setEmployee({
            ...employee,
            description: ev
        });
    }

    function handleChangeImage(ev) {
        if (ev.target.files.length !== 0) {
            setEmployee({
                ...employee,
                image: ev.target.files[0]
            });
        }
    }


    function handleDeleteImage(ev) {
        setEmployee({
            ...employee,
            image: ""
        });
    }

    function ab2str(buf) {
        var binary = '';
        var bytes = new Uint8Array(buf);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return binary;
    }

    function handleSubmit(ev) {
        ev.preventDefault();
        if (employee.image) {
            employee.image.arrayBuffer().then(value => {
                var data = {
                    first_name: employee.first_name,
                    patronymic: employee.patronymic,
                    last_name: employee.last_name,
                    degree: employee.degree !== "" ? employee.degree : null,
                    rank: employee.rank !== "" ? employee.rank : null,
                    role: employee.role,
                    description: employee.description,
                    image: ab2str(value) + employee.image.type + " ".repeat(255 - employee.image.type.length),
                };
                EmployeeDataService.updateEmployee(data)
                    .then(() => {
                        setSubmitted(true);
                    })
                    .catch(e => {
                        console.log(e);
                    });
            }).catch(err => {
                console.log(err);
            });
        } else {
            var data = {
                first_name: employee.first_name,
                patronymic: employee.patronymic,
                last_name: employee.last_name,
                degree: employee.degree !== "" ? employee.degree : null,
                rank: employee.rank !== "" ? employee.rank : null,
                role: employee.role,
                description: employee.description,
                image: ""
            };
            EmployeeDataService.updateEmployee(data)
                .then(() => {
                    setSubmitted(true);
                })
                .catch(e => {
                    console.log(e);
                });
        }
    }

    //https://stackoverflow.com/questions/43992427/how-to-display-a-image-selected-from-input-type-file-in-reactjs

    return (
        !submitted ? (
            <div className="col-sm-8">
                <form onSubmit={handleSubmit}>
                    <div className="form-group mb-3">
                        {(() => {
                            if (employee.image !== "" && employee.image.type.startsWith("image/") !== false) {
                                return (
                                    <img className="img-fluid img-thumbnail" src={URL.createObjectURL(employee.image)} />
                                )
                            } else if (employee.image !== "" && employee.image.type.startsWith("image/") === false) {
                                return (
                                    <div style={{ color: "red" }}>Неправильный файл</div>
                                )
                            }
                        })()}
                    </div>
                    <div className="form-group mb-3">
                        <input type="file" name="image" accept="image/*" onChange={handleChangeImage} className="form-control" />
                    </div>
                    <div className="form-group mb-3">
                        <input type="text" name="first_name" value={employee.first_name} placeholder="Имя" onChange={handleChangeFirst_Name} className="form-control" />
                    </div>
                    <div className="form-group mb-3">
                        <input type="text" name="patronymic" value={employee.patronymic} placeholder="Отчество" onChange={handleChangePatronymic} className="form-control" />
                    </div>
                    <div className="form-group mb-3">
                        <input type="text" name="last_name" value={employee.last_name} placeholder="Фамилия" onChange={handleChangeLast_Name} className="form-control" />
                    </div>
                    <div className="form-group mb-3">
                        <input type="text" name="degree" value={employee.degree} placeholder="Ученая степень" onChange={handleChangeDegree} className="form-control" />
                    </div>
                    <div className="form-group mb-3">
                        <input type="text" name="rank" value={employee.rank} placeholder="Должность" onChange={handleChangeRank} className="form-control" />
                    </div>
                    <div className="form-group mb-3">
                        <select type="text" name="role" value={employee.role} onChange={handleChangeRole} className="form-control">
                            <option value="сотрудник">Сотрудник</option>
                            <option value="заведующий">Заведующий</option>
                            <option value="совместитель">Совместитель</option>
                        </select>
                    </div>
                    <div className="form-group mb-3">
                        <MDEditor type="text" name="description" value={employee.description} placeholder="Описание задачи" onChange={handleChangeDescription} />
                    </div>
                    <div className="row g-2 mt-1">
                        {(() => {
                            if (employee.image !== "") {
                                if (employee.image.type.startsWith("image/")) {
                                    return (
                                        <div className="col-auto">
                                            <input type="submit" value="Добавить" className="btn btn-primary" />
                                        </div>
                                    )
                                } else {
                                    return (
                                        <div className="col-auto">
                                            <input type="submit" value="Добавить" className="btn btn-primary" disabled />
                                        </div>
                                    )
                                }
                            } else {
                                return (
                                    <div className="col-auto">
                                        <input type="submit" value="Добавить" className="btn btn-primary" />
                                    </div>
                                )
                            }
                        })()}
                        <div className="col-auto">
                            <input type="button" value="Удалить изображение" onClick={handleDeleteImage} className="btn btn-primary" />
                        </div>
                    </div>
                </form>
            </div>
        ) : <Navigate to="/employees" />
    )

}

function mapStateToProps(state) {
    const { user } = state.auth;
    return {
        user
    };
}

export default connect(mapStateToProps)(AddEmployee);