useFieldArray methonds not working correctly

[ArsenPavliuk-Univisia]

Hello everyone, I need to append and remove values from the list using a counter. However, when I use the append method, 2 values are added. The remove method does not work at all.

const OperationsStep = () => {
  const form = useForm<IOperationsFormValues>({
    defaultValues: {
      rooms: [],
    },
  });

  const { control, setFocus, handleSubmit } = form;

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

  const validation = useFormErrorHandling({
    setFocus,
  });

  const { navigateToError, registerFieldRef } = validation;

  const { handleFormSubmit, onSaveAndExit, onNext, onCancel } =
    useFormSubmissionType<IOperationsFormValues>();

  return (
    <FormValidationProvider validation={validation}>
      <FormProvider {...form}>
        <form onSubmit={handleSubmit(handleFormSubmit, navigateToError)}>
          <Part childrenClassName="mt-0 gap-[72px]">
            <Part title={"Room Configuration"}>
              <Controller
                name={"rooms"}
                control={control}
                render={({ field, fieldState }) => (
                  <ErrorHandledField
                    error={fieldState.error?.message}
                    ref={(el) => registerFieldRef(field.name, el)}
                  >
                    <Counter
                      initialValue={roomArray.length}
                      onDecrement={() => {
                        console.log("decrement");
                        fieldRemove(roomArray.length - 1);
                      }}
                      onIncrement={() => {
                        console.log("increment");
                        append({
                          type: undefined,
                          roomData: {
                            toiletType: undefined,
                          },
                        });
                      }}
                    />
                  </ErrorHandledField>
                )}
              />

              {roomArray.map((field, idx) => (
                <Room key={field.id} roomNumber={idx + 1} />
              ))}
            </Part>

            <StepNavigation
              onNext={onNext}
              onSaveAndExit={onSaveAndExit}
              onCancel={onCancel}
            />
          </Part>
        </form>
      </FormProvider>
    </FormValidationProvider>
  );
};

export default OperationsStep;

After 2 increment operations,I have:
.
As I mentioned decrement does not work at all

,

[uttampun44]

`    const { fields, append, remove } = useFieldArray({
        control: formMethods.control,
        name: "routines"
    });
  {fields.map((field, index) => (
                                <div key={field.id} className={cn("p-4 rounded-md relative")}>
                                    <h3 className={cn("font-medium mb-2.5")}>{t("Routine")} #{index + 1}</h3>

                                    <div className={cn("grid grid-cols-2 gap-3")}>
                                        <Dropdown
                                            label={t("Subject")}
                                            className={{
                                                container: 'w-full'
                                            }}
                                            inputName={`routines.${index}.subject_id`}
                                            data={convertNameIdToDropdownData(subjects)}
                                            placeholders={{
                                                noOptions: t("No subjects available"),
                                                noSelection: t("Select a subject"),
                                                search: t("Search subject")
                                            }}
                                            focusNext={`routines.${index}.teacher_id`}
                                        />

                                        <Dropdown
                                            label={t("Teacher")}
                                            className={{
                                                container: 'w-80'
                                            }}
                                            inputName={`routines.${index}.teacher_id`}
                                            data={convertNameIdToDropdownData(teachers)}
                                            placeholders={{
                                                noOptions: t("No teachers available"),
                                                noSelection: t("Select a teacher"),
                                                search: t("Search teacher")
                                            }}
                                            focusNext={`routines.${index}.from`}
                                        />

                                        <FormField
                                            type="time"
                                            name={`routines.${index}.from`}
                                            label={t("From Time")}
                                            placeholder={t("Select start time")}
                                            className="w-full"
                                            focusNext={`routines.${index}.to`}
                                        />

                                        <FormField
                                            type="time"
                                            name={`routines.${index}.to`}
                                            label={t("To Time")}
                                            placeholder={t("Select end time")}
                                            className="w-full"
                                        />
                                    </div>

                                    {fields.length > 1 && index > 0 && (
                                        <Icon
                                            name="delete"
                                            className={cn("absolute top-2 right-2 text-red-500 hover:text-red-600 cursor-pointer self-center")}
                                            onClick={() => remove(index)}
                                        >
                                        </Icon>
                                    )}
                                </div>
                            ))}
`

@ArsenPavliuk-Univisia this my code you can check.

[ArsenPavliuk-Univisia]

My bug was that I passed index + 1 to the Room component but treated it as a zero-based index, so the fields didn’t work. Thanks for helping :)