Невозможно ввести контролируемый ввод React

Я создаю приложение, которое позволяет пользователям динамически создавать новые поля формы. При создании нового поля я столкнулся с ошибкой, из-за которой, когда React повторно отображает мой сопоставленный массив ввода пользователя, данные формы не перерисовываются, поэтому формы выглядят пустыми. Я понял, что это потому, что я не установил атрибуты значения для своего ввода, но после того, как я их установил, я больше не мог вводить данные.

Состояние:

Функция отображения:

Компонент группы ввода:

Обработчик onChange:

Ввод:

Я пытался поискать в Интернете, но большинство похожих проблем, похоже, были исправлены путем изменения орфографии. Мой onChange все еще записывает в консольные журналы, но в консольных журналах отображается только один отслеживаемый символ как измененный. Кроме того, при горячей перезагрузке страницы он отображает этот сохраненный символ в правильном вводе.

interface FieldObject {
  fieldName: string;
  fieldValue: string;
}

class FieldObject {
  constructor(fieldName: string, fieldValue: string) {
    this.fieldName = fieldName;
    this.fieldValue = fieldValue;
  }
}

const [userInput, setUserInput] = useState([new FieldObject("", "")]);

{userInput.map((element, index) => (
          <InputGroup
            key={uuidv4()}
            id={index}
            onChange={(e: React.ChangeEvent) => onChange(e, index)}
            onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
              removeField(e, index)
            }
            inputValue={element.fieldName || ""}
            textAreaValue={element.fieldValue || ""}
          />
        ))}

return (
    <div>
      <TextInput
        id={id.toString()}
        label="Field Name"
        placeholder="Cat Sounds"
        name="fieldName"
        onChange={onChange}
        value={inputValue}
      />
      <TextField
        id={id.toString()}
        label="Field Value"
        placeholder="meow purr"
        onChange={onChange}
        name="fieldValue"
        value={textAreaValue}
      />
      <button onClick={onClick}>Remove</button>
    </div>
  );

function onChange(e: React.ChangeEvent, index: number) {
    const target = e.target;
    const newUserInput: Array<FieldObject> = userInput;
    newUserInput[index][target.name] = target.value;
    setUserInput(newUserInput);
  }

<input
        className="block text-base px-2 pt-2 pb-1 bg-black border-b-2 border-b-slate-700 focus:border-b-white focus:outline-1 focus:outline-offset-8 shadow-lg transition-all"
        id={id}
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        name={name}
      ></input>