React Hook Form Dirty State not updating properly with field array

I am using the field array in react hook form. I have noticed that if I change the value of a field array item, then remove a previous item, there becomes a mismatch / sync issue between the dirty state and the form data sent by the handleSubmit method.

For example, lets say I modify requirements.1.description. I them use the field array remove function to delete requirements.0.description (all prior to submitting my form). Now, when I submit the form, the dirty state is telling me that requirements.1.description is dirty; however, the form data sent to the submit function has removed the item for requirements.0.description and has moved requirements.1 to position 0. As a result, there is a mismatch between the dirty state and form state, meaning I cannot do any sort of comparison to find the updated data for the field array state.

I found quite a bit online talking about similar issues, but not specifically for field arrays. This issue is specific to field arrays, considering that items can be removed.

Here is a basic form highlighting the issue:

const BasicForm = () => {
  const { control, handleSubmit, register, formState: { errors } } = useForm({
    defaultValues: {
      requirements: [{ description: '' }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'requirements',
  });

  const onSubmit = (data) => {
    console.log('Form data', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id} style={{ marginBottom: '10px' }}>
          <Controller
            control={control}
            name={`requirements.${index}.description`}
            render={({ field }) => (
              <input
                {...field}
                placeholder={`Requirement ${index + 1}`}
                style={{ marginRight: '10px' }}
              />
            )}
          />
          <button type="button" onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ description: '' })}>
        Add Requirement
      </button>
      <button type="submit">Submit</button>
    </form>
  );
};

So, if I were to have two lines of data, and modify the second then remove the first and then submit, the form data has already updated to remove the first item and moved the second item to the first index position. However, the dirty state is still indicating to me that the item at the SECOND index is what changed; this means when I write logic to find and update the second element’s info, I get funky behavior because there is no longer a second element.

This seems like quite a hole in react hook form – so much so that I am wondering if there is a simple approach to this, something that I may have missed or am not thinking of. How can I fix this? Is there some way to update the dirty state after the form state updates to accurately reflect which field is different?