remove method of FieldArray triggers submission

[ranran2121]

Hi,
I am using the FieldArray and when I delete an item od the array I have noticed that a submission gets triggered. That is, when I click the X button, I remove correctly the item, but I have "DATA" printed in the console, that is the handleSumbit is called

Is there a way to avoid this and have the submission ONLY when I click the submit button?
using nextjs@13.4.10

import { useState } from "react";
import { useForm, useFieldArray } from "react-hook-form";

const SweetForm = () => {
  const [feedback, setFeedback] = useState("");
  const [hasClicked, setHasClicked] = useState(false);

  const {
    register,
    handleSubmit,
    reset,
    control,
    formState: { errors },
  } = useForm();

  const { fields, append, remove } = useFieldArray({
    control,
    name: "ingredients",
  });

  const handleReset = () => {
    reset();
    setFeedback("");
  };

  const onSubmit = async (data) => {
    if (!hasClicked) {
      setHasClicked(true);
      console.log("DATA", data);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        {fields.map((field, index) => {
          return (
            <div key={index}>
              <div>
                <div>
                  <div>
                    <input
                      type="text"
                      {...register(`ingredients.${index}.name`, {
                        required: true,
                      })}
                      id="name"
                    />
                    <button
                      onClick={() => {
                        remove(index);
                        fields.length--;

                        if (fields.length == 0) {
                          append({ name: "" });
                        }
                      }}
                    >
                      x
                    </button>
                  </div>
                </div>
              </div>
            </div>
          );
        })}

        <button
          onClick={() => {
            append({ name: "" });
          }}
        >
          <span>Add ingredient</span>
        </button>

        <div className="my-4 flex flex-row gap-4">
          <button className="btn" type="submit">
            SUBMIT
          </button>

          <button className="btn" type="button" onClick={handleReset}>
            Reset
          </button>
        </div>
      </form>
    </>
  );
};

export default SweetForm;

[ranran2121]

@bluebill1049, can you please help me?

[leapful]

@ranran2121

Please provide a codesandbox url to re-produce the issue.