Как заполнить массив в JS и реагировать? TypeError: Невозможно установить свойство 'organization' из неопределенного

Question

Я хочу заполнить массив «data» данными, которые я получаю от displayUserInfo. Неудивительно, что приведенный ниже фрагмент кода берет и записывает последнюю строку моего ввода.

populateArray = () => {
    var index= 0;
    let data =  [{
        name: "",
        surname: "",
        age: ""
    }]

    this.state.displayUserInfo.map(currData => {

        data.name = currData.givenName;
        data.surname = currData.givenSurname;
        data.age = currData.givenAge;

        index++;
    });
    console.log(data);
    return data;
}

Я хотел бы сделать что-то вроде этого:

data[index].name = currData.givenName;

Но это дает мне ошибку: TypeError: Невозможно установить свойство 'name' из неопределенного

Как мне правильно сопоставить все данные из входных данных (массив объектов) с массивом данных? Этот метод правильный? Любые другие подходы? Спасибо