please help me to fix this error

import React, { useState } from "react";

import "./AddUser.css";
import {
validate,
validatorRequire,
validatorNumber,
} from "../../shared/util/validator";
import { Link } from "react-router-dom";
import * as userService from "./service";

const AddUser = () => {
const [formState, setFormaState] = useState({
errors: [],
users: [],
});
// class addUser extends Component {
// componentDidMount() {
// userService
// .getUsers()
// .then((response) => this.setFormaState({ users: response.data }));
// }
// }
// componentDidMount() {

// }
const addUserSubmitHandler = (event) => {
event.preventDefault();
const errors = validateForm();

if (errors.length) {
  alert("gikhare sag");
  setFormaState({ ...formState, errors });
  return;
}
userService.addUser(formState.user);
setFormaState({ errors: [], users: userService.getUsers() });

};

const validators = {
code: [validatorRequire(), validatorNumber()],
fname: [validatorRequire()],
lname: [validatorRequire()],
phone: [validatorRequire(), validatorNumber()],
fee: [validatorRequire(), validatorNumber()],
};

const farsiNames = {
code: "کد",
fname: "نام",
lname: "نام خانوادگی",
phone: "شماره تماس",
fee: "دستمزد",
};

const changeHandler = (e) => {
const user = {};
const name = e.target.name;
const value = e.target.value;
user[name] = value;
const errors = validate(value, validators[name], farsiNames[name]);
setFormaState({
...formState,
user: { ...formState.user, ...user },
errors,
});
};
const validateForm = () => {
let errors = [];
const fields = Object.keys(farsiNames);
for (let field of fields) {
const fieldErrors = validate(
formState.user ? formState.user[field] : undefined,
validators[field],
farsiNames[field]
);
errors = errors.concat(fieldErrors);
}

return errors;

};

return (

    <input
      element="input"
      type="text"
      id="fname"
      name="fname"
      className="fname form-control m-2 col-md-2 d-block"
      placeholder="نام"
      onChange={changeHandler}
    />
    <input
      element="input"
      type="text"
      id="lname"
      name="lname"
      className="lname form-control m-2 col-md-2 "
      placeholder="نام خانوادگی"
      onChange={changeHandler}
    />
    <input
      element="input"
      type="text"
      id="phone"
      name="phone"
      className="phone form-control m-2 col-md-3"
      placeholder="شماره تماس"
      onChange={changeHandler}
    />
    <input
      element="input"
      type="text"
      id="fee"
      name="fee"
      className="fee form-control col-md-3 m-2 p-3"
      placeholder="دستمزد"
      validators={[validatorRequire]}
      onChange={changeHandler}
    />
  </div>

  <button className="btn btn-success mx-auto d-block mt-5">
    اضافه کردن
  </button>

  <div className="container mt-5">
    <table className="table table-striped">
      <thead>
        <tr>
          <th scope="col">ردیف</th>
          <th scope="col">{farsiNames.code}</th>
          <th scope="col">{farsiNames.fname}</th>
          <th scope="col">{farsiNames.lname}</th>
          <th scope="col">{farsiNames.phone}</th>
          <th scope="col">{farsiNames.fee}</th>
        </tr>
      </thead>

      <tbody>
        {formState.users.map((user, index) => {
          return (
            <tr key={index}>
              <th scope="row">{index + 1}</th>
              <td>{user.code}</td>
              <td>{user.fname}</td>
              <td>{user.lname}</td>
              <td>{user.phone}</td>
              <td>{user.fee}</td>
              <td>
                <Link to={"/userfee/" + user.code}>
                  <span role="button" className="btn btn-primary btn-sm">
                    Edit
                  </span>
                </Link>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
</form>

);
};
export default AddUser;