Вход теряет фокус при нажатии кнопки

Question

Я собираюсь начать с того, что знаю, что на этом сайте есть по крайней мере десять других почти идентичных вопросов. Я видел их все и пробовал много ответов, но проблема не устранена, возможно, потому, что я пытаюсь реализовать ответы неправильно. В любом случае, когда я вставляю символ в один из входов MA C, он теряет фокус. Далее следует фрагмент кода с указанным вводом и методом onChange.

            {
                user.MACs.map
                (
                    (MAC, index) =>
                    {
                        return (
                            <div className = "singleMAC" key = {"singleMAC"+index}>
                                <label htmlFor = "MAC">MAC {index+1}</label>
                                <input
                                    form = "userEdit"
                                    className = "MACInput"
                                    value = {MAC || ""}
                                    placeholder = "MAC"
                                    onChange = {(e) => handleChangeMAC (index, e)}
                                />
                                <button
                                className = "buttonMACRemove"
                                type = "button"
                                onClick = {() => handleRemoveMAC (index)}
                                >
                                    X
                                </button>
                            </div>
                        );
                    }
                )
            }

И ...

function handleChangeMAC (index, e)
{
    const values = [...user.MACs];
    values[index] = e.target.value;
    var newUser = Object.assign ({}, user);
    newUser.MACs = values;
    setUser (newUser);
}