I have a series of text input fields - their input is managed by useState like this:

const [formFields, setFormFields] = useState([
{ textinput1: "", textinput2: "", textinput3: "", reactQuill: "" } ]);

Their handle change is managed with this function, because more text fields can be added, and every index of the additions has to have its input get saved:

function handleChangeInput(index, event) {
    const values = [...formFields];
    values[index][event.target.name] = event.target.value
    setFormFields(values);
}

And this is what they look like and function as intended:

{
      formFields.map((formField, index) => (

      <React.Fragement key={index}>

      <TextField

      name='textinput1'
      value={formField.textinput1}
      onChange={event => handleChangeInput(index, event)}
      
      />
      ))
      }

However, when I try the same exact logic with the React Quill (rich text editor) input, it's not working at all. So for example, this will not work:

 <ReactQuill 
    
    name="reactQuill"
    onChange={event => handleChangeInput(index, event)}
    value={formField.reactQuill}
    

    />

I am getting an error of "name" being undefined, and I am not sure how to work around this? Thanks in advance if anyone knows how to fix this!