FieldArray rendering issue

[datta202]

I have a scenario where I want to show a form in a slider. I am using FieldArray, but I am facing a few issues.

Issue 1
The append data is creating new form data but not copying the form values that I am passing when I click on append. However, when I check the console, it shows the values correctly.

Issue 2
Additionally, when I remove a specific form, it is removing the last one. When I do a console log, it shows that it is not actually removing the last one. However, in the UI, the last form is removed.

const settings = {
  dots: true,
  centerMode: false,
  className: "variable-width",
  infinite: false,
  centerPadding: "60px",
  slidesToShow: 1,
  slidesToScroll: 1,
  speed: 500,
  variableWidth: true,
};

const Slider = ({ slides }: any) => {
  return <ReactSlickSlider {...settings}>{slides}</ReactSlickSlider>;
};

const Form = () => {
  const { handleSubmit, watch, control, setValue } = useForm({
    defaultValues: {
      items: [{ name: "", age: "" }],
    },
    mode: "onChange",
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "items",
  });

  const watchItems = watch("items");

  const slides = fields.map((field, index) => {
    return (
      <div key={field.id}>
        <Wrapper>
          <button
            type={"button"}
            onClick={() => {
              const data = { ...watchItems[index] };
              append(data);
            }}
          >
            Duplicate
          </button>
          <button
            type={"button"}
            onClick={() => {
              remove(index);
            }}
          >
            Remove
          </button>
          <div>
            <h2>Name</h2>
            <input
              type={"text"}
              onChange={(e) => setValue(`items.${index}.name`, e.target.value)}
            />
          </div>
          <div>
            <h2>Age</h2>
            <input
              type={"text"}
              onChange={(e) => setValue(`items.${index}.age`, e.target.value)}
            />
          </div>
        </Wrapper>
      </div>
    );
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <Container>
      <div>
        <button onClick={handleSubmit(onSubmit)}>Save</button>
      </div>
      {/*<form style={{ display: 'flex' }}>{slides}</form>*/}
      <Slider slides={slides} />
    </Container>
  );
};

export default memo(Form);

Codesandbox
https://codesandbox.io/p/sandbox/react-hook-form-rendering-issue-wfnpjt?file=%2Fsrc%2FApp.tsx

Please help me to fix this issue. Thank you

[BrendanC23]

The Codesandbox link is broken. Can you make sure it is public?