Почему в Гутенберге не сохраняется измененный массив объектов?

Я пытаюсь создать блок Гутенберга, в котором пользователь может ввести несколько пар ключ-значение. Эти пары называются functions, ключ называется name, а значение people.

Следующий пример с жестко запрограммированным массивом работает нормально:

attributes: {
    functions: {
        type: 'array',
        default: [{name:'', people:''}]
    }
},

edit({attributes, setAttributes}) {
    function updateFunction(event) {
        setAttributes({functions: [{name:'Test function', people:'Jack'}]});
    }

    return (
        <table className='credits-table'>
            <tr>
                <td>
                    <input type='text' placeholder="Function" value={attributes.functions[0].name} onChange={updateFunction} />
                </td>
                <td>
                    <textarea rows='3' placeholder="Names" value={attributes.functions[0].people} onChange={updatePeople} />
                </td>
            </tr>
        </table>
    );
}

Атрибуты обновляются, и новый текст отображается внутри поля ввода и текста. Это, однако, должно принимать значение входной функции для фактического обновления, конечно, но это не работает таким образом:

function updateFunction(event) {
    let func = attributes.functions;
    func[0].name = "Jane";
    setAttributes({functions: func});
    console.log(attributes);
}

Вывод последней строки показывает ожидаемый результат, но текстовые поля не обновляются и даже снова очищаются:

[{name: "Jane", people: ""}]

Если я использую func[0].name = event.target.value, результатом атрибутов всегда будет [{name: "e", people: ""}], независимо от того, какую букву я набрал. console.log(event.target.value);, однако, записывает письмо, которое я набрал, как ожидалось.

Так почему это не работает? Есть ли какие-то странные ограничения на сохранение вложенных объектов в Гутенберге, о которых я не знаю?

ОБНОВЛЕНИЕ

Благодаря этому комментарию, я нашел обходной путь, но должен же быть способ получше, не так ли?

function updateFunction(event) {
    var func = JSON.parse(JSON.stringify(attributes.functions));
    func[0].name = event.target.value;
    setAttributes({functions: func});
}

person Axel Köhler    schedule 13.05.2020    source источник