React Hook Form - Dynamically adding form fields - buttons not working correctly

Question

I am having trouble with a React component that uses React Hook Form to dynamically add form fields. The component allows users to add exercises to a workout routine. Each exercise has properties like name, weight, reps, etc. Users can add new exercises and sets using "Add Exercise" and "Add Set" buttons.

The issue is that the buttons don't work as expected.

After clicking the "Add Set" button, the button disappears and does not reappear until I press the "Add Exercise" button.

After clicking Add Exercise, the exercises selected in previous fields change.

After clicking Add Exercise, the sets related to the same exercise change

Here's the relevant code snippet:

const WorkoutForm = ({ saveTo, defaultValues }) => {
    const { control, handleSubmit, getValues, setValue, reset } = useForm({ defaultValues });
    const { fields, append, insert, remove } = useFieldArray({
        control,
        "name": "exercises",
        "keyName": "fieldId",
    });

  // ... other code

  const addSet = (index) => {
    const currentValues = getValues(`exercises.${index}`);
    insert(index + 1, {
      "name": currentValues.name,
      "personalBest": currentValues.personalBest || "N/A",
      "duration": currentValues.duration,
      "reps": currentValues.reps,
    });
    setRemovedButtons([...removedButtons, index]);
  };

  // ... other code


    const groupExercisesByName = (exercises) => {
        const grouped = {};
        exercises.forEach((exercise) => {
            if (!grouped[exercise.name]) {
                grouped[exercise.name] = [];
            }
            grouped[exercise.name].push(exercise);
        });
        return Object.entries(grouped).map(([name, sets]) => { return { name, sets }; });
    };

    const groupedExercises = groupExercisesByName(fields);

  return (
    // ... other JSX
    <View>
      {groupedExercises.map((group, groupIndex) => (
        <View key={group.name}>
          {/* ... */}
          {!removedButtons.includes(groupIndex) && (
            <TouchableOpacity onPress={() => {
              updateData();
              addSet(groupIndex);
            }}>
              <Text>Add Set</Text>
            </TouchableOpacity>
          )}
        </View>
      ))}
      <TouchableOpacity onPress={() => {
        updateData();
        append({ "name": "", "duration": "", "reps": "" });
      }}>
        <Text>Add Exercise</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleSubmit(onSubmit)}>
        <Text>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

export default WorkoutForm;

Dropdown Box component:

import { Dropdown } from "react-native-element-dropdown";

const DropdownComponent = ({ data, value, onChange, placeholder = "Select an option" }) => {
    return (
<Dropdown data = {data} labelField = "label" valueField = "value" placeholder = {placeholder} value = {value} onChange = {(item) => { onChange(item.value); }} />
    );
};

I've tried debugging the code but can't figure out why the buttons aren't working. Any help would be appreciated! I haven't been able to find the same issue online. I have tried removing the react-hook-form dependency and creating the form manually. This hasn't worked