Смешанные поля данных полезной нагрузки в форме регистрации реакции

Я действительно новичок, чтобы реагировать я создал форму регистрации, но при публикации значения данных смешаны Я создал onchange и onsubmit, чтобы отслеживать изменения и отправлять их на внутренний сервер. но я получаю плохой запрос, потому что значения смешаны в полезной нагрузке

const Signup = ({ signup, isAuthenticated }) => {
  const [accountCreated, setAccountCreated] = useState(false);
  const [formData, setFormData] = useState({
    username: "",
    password: "",
    email: "",
    first_name: "",
    last_name: "",
    profile_type: "",
  });

 

  const { username, password, email, first_name, last_name, profile_type } = formData;

  const onChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = (e) => {
    e.preventDefault();

    signup(username, password, email, first_name, last_name, profile_type);
    setAccountCreated(true);
  };

  if (isAuthenticated) {
    return <Redirect to = "/" />;
  }
  if (accountCreated) {
    return <Redirect to = "/login" />;
  }

  return (
    <div className = "container mt-5">
      <h1>Sign Up</h1>
      <p>Create your Account</p>
      <form onSubmit = {(e) => onSubmit(e)}>
      <div className = "form-group">
          <input
            className = "form-control"
            type = "text"
            placeholder = "Username"
            name = "username"
            value = {username}
            onChange = {(e) => onChange(e)}
            required
          />
        </div>
        <div className = "form-group">
          <input
            className = "form-control"
            type = "password"
            placeholder = "Password"
            name = "password"
            value = {password}
            onChange = {(e) => onChange(e)}
            minLength = "6"
            required
          />
        </div>
        <div className = "form-group">
          <input
            className = "form-control"
            type = "email"
            placeholder = "Email*"
            name = "email"
            value = {email}
            onChange = {(e) => onChange(e)}
            required
          />
        </div>
        <div className = "form-group">
          <input
            className = "form-control"
            type = "text"
            placeholder = "First Name*"
            name = "first_name"
            value = {first_name}
            onChange = {(e) => onChange(e)}
            required
          />
        </div>
        <div className = "form-group">
          <input
            className = "form-control"
            type = "text"
            placeholder = "Last Name*"
            name = "last_name"
            value = {last_name}
            onChange = {(e) => onChange(e)}
            required
          />
        </div>
        <div className = "form-group">
          <select
            className = "form-control"
            name = "profile_type"
            onChange = {(e) => onChange(e)}
            required            
          >
            <option value = "">--------</option>
            <option value = "STD">
              Student
            </option>
            <option value = "PRF">
              Professor
            </option>
          </select>
        
        </div>
        <button className = "btn btn-primary" type = "submit">
          Register
        </button>
      </form>
      <p className = "mt-3">
        Already have an account? <Link to = "/login">Sign In</Link>
      </p>
    </div>
  );
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
});

export default connect(mapStateToProps, { signup })(Signup);

и когда я отправляю, это то, что я получаю в полезной нагрузке все значения смешаны, но адрес электронной почты и тип профиля верны Как я могу это исправить?

{username: "lastname", password: "firstname", email: "[email protected]", first_name: "username1",…}
email: "[email protected]"
first_name: "username1"
last_name: "Password"
password: "firstname"
profile_type: "STD"
username: "lastname"

быть таким

{username: "username1", password: "Password", email: "[email protected]", first_name: "firstname",…}
email: "[email protected]"
first_name: "firstname"
last_name: "lasttname"
password: "Password"
profile_type: "STD"
username: "username1"