UseFieldArray clearing the value of new added field if making changes to any previous Field values

[ayushdevelop]

Hello Everyone

I have a component currently where I am using append to add a new input field with these two properties

 append({
      question: "",
      isActive: true,
    });

This is the code

                 {fields.map((field, index) => (
                    <section key={field.id} className="flex w-full">
                      <div className="relative w-full">
                        <input
                          type="text"
                          id="question"
                          className="w-full rounded-md border-0 outline-none bg-white py-2.5 px-3 text-[#363939] shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6"
                          placeholder={`Question ${index + 1}`}
                          {...register(`questions.${index}.question`)}
                        />

                        <Switch
                          checked={field.isActive}
                          onChange={() => {
                            handleToggleActive(index, !field.isActive);
                          }}
                          data-testid="toggle-switch"
                          className={clsx(
                            "absolute top-[5px] mt-1 right-[3px] m-2 inline-flex items-center h-[1.5rem] w-[2.75rem] cursor-pointer rounded-50 transition-colors duration-200 ease-in-out shadow-toggle-shadow",
                            {
                              "bg-[#001A5E]": field.isActive,
                              "bg-[#E5E7EB]": !field.isActive,
                            }
                          )}>
                          <span className="sr-only">Toggle question</span>
                          <span
                            aria-hidden="true"
                            className={clsx(
                              "shadow-inner-toggle-circle inline-flex items-center justify-center h-20 w-20 transform rounded-full bg-white transition duration-200 ease-in-out",
                              {
                                "translate-x-[1.3rem]": field.isActive,
                                "translate-x-0.5": !field.isActive,
                              }
                            )}>
                            {field.isActive ? (
                              <BsCheck size={16} className="text-[#4BB543]" />
                            ) : (
                              <RxCross2 size={12} />
                            )}
                          </span>
                        </Switch>
                      </div>
                    </section>
                  ))}

If you see here I have a Switch element this is used to change the isActive property of a particular field value
the logic to handle this switch works like this

const handleToggleActive = (index: number) => {
    const updatedQuestions = [...fields];
    updatedQuestions[index].isActive = !updatedQuestions[index].isActive;
    setValue(`questions`, updatedQuestions);
  };

So what I am facing an issue with when I add a new input field using append and type my text to that input, after that if I use Switch to change the value of the isActive property of any previous field element or the newly appended field element it removes the text added to the newly added input field.

What can be causing this issue as I have looked I don't see any issues in my code or is there something I am missing?