text.content funcionando somente com um elemento de array

Para treinar minhas habilidades com JavaScript decidi montar um sorteador de paleta de cores a partir de um array. Criei um loop que adiciona 3 valores hexadecimais do array cores[ ] em um outro listaHex[ ]. Os valores são sorteados e adicionados no array, porém, na hora de substituir o conteudo de texto de 3 com os valores de 'listaHex[ ]' somente o text.content com o indice [0] de listaHex funciona.

Segue o código JS:

var botaogerar = document.getElementById("botao-gerar");

var cores = ['#CF2F2F', '#CF2FB2', '#732FCF', '#2F40CF', '#2FCFCA', '#36CF2F', '#CFC02F', '#F97D00', '#6F4535', '#787878', '#202020', '#009BDF'];

botaogerar.addEventListener("click", function(){

    for (i = 0; i < 3 ; i++){
        var listaHex = [];
        var codhex = "";
        var indiceArray = escolheCorNoArray();
        codhex += cores[indiceArray];
        listaHex.push(codhex);
        console.log(listaHex);
    }

    var hexgrupoa1 = document.getElementById("hex-grupo-a-1");
    hexgrupoa1.textContent = listaHex[0]

    var hexgrupoa2 = document.getElementById("hex-grupo-a-2");
    hexgrupoa2.textContent = listaHex[1]

    var hexgrupoa3 = document.getElementById("hex-grupo-a-3");
    hexgrupoa3.textContent = listaHex[2]

});


function escolheCorNoArray(){
    return Math.floor(Math.random()*cores.length);
}