I have a form with a variable number of email input fields. The user can click a button to add an additional email input if the wish. My form then maps out the inputs:

function renderEmailFields() {
  return [...Array(numberOfEmails).keys()].map((i) => {
    return (
      <div key={i} className={styles.inputContainer}>
         <InputValidatable
            autoFocus={true}
            className={styles.input}
            id={`supportSquadEmail-${i}`}
            isValid={Validation.isEmailAddress(inviteEmails[i])}
            name={`supportSquadEmail-${i}`}
            value={inviteEmails[i]}
            onChange={(e) => handleEmailChange(i, e)}
            placeholder="Enter email here..."
          />

 </div>
 );
});
}

const [inviteEmails, setInviteEmails] = useState(["", "", ""]);
const [numberOfEmails, setNumberOfEmails] = useState(3);

function handleEmailChange(index, e) {
   const placeHolderArray = inviteEmails;
   placeHolderArray[index] = e.target.value;
   setInviteEmails([...placeHolderArray]);
}

When I click on any of the email inputs, my Chrome browser gives my autocomplete options. Selecting one of the autocomplete options is causing ALL of the email inputs to populate with that value.