Spread operator sobrescrevendo dados

Boa noite pessoal, estava tentando refazer a lista de dependentes e topei com um comportamento já dito anteriormente do operador ..., segue o código:

const clientes = [
 {
   nome: "André",
   cpf: "12312312312",
   dependentes: [{
     nome: "Sara",
     parentesco: "filha",
     dataNasc: "20/03/2011"
    },
    {
     nome: "Samia",
     parentesco: "filha",
     dataNasc: "04/01/2014"
    }],
 },
 {
   nome: "Juliana",
   cpf: "56767867867",
   dependentes: [{
     nome: "Sophia",
     parentesco: "filha",
     dataNasc: "30/08/2020"
    }],
 }
]

let listaDeDependentes = [];

for (let i = 0; i < clientes.length; i++) {
    listaDeDependentes = [...clientes[i].dependentes]
}

Esse código retorna uma array contendo somente o dependente "Sophia", que é a última depentende da array de clientes. Como todos os objetos têm o mesmo nome para as chaves, o operador de spread puxa os dados sempre sobrescrevendo o anterior, resultando no seguinte objeto.

console.log(listaDeDependentes); 

// [{
        nome: 'Sophia',
        parentesco: 'filha',
        dataNasc: '30/08/2020'
    }]

Dei uma olhada em alguns posts do fórum e a forma que eu encontrei para resolver isso, com base no que o pessoal respondeu, é utilizando o método .push(), desta forma toda vez que o operador ... passar por um clientes.dependente, ele ira adicionar esse elemento ao array listaDeDependentes sem sobrescrever o dado anterior, da seguinte forma.

// utilizando for(;;)
for (let i = 0; i < clientes.length; i++) {
    listaDeDependentes.push(...clientes[i].dependentes);
}

// utilizando forEach()
clientes.forEach(cliente => listaDeDependentes.push(cliente.dependentes));

Com qualquer uma das formas anteriores conseguimos um array listaDeDependentes com os 3 objetos existentes dentro do array cliente.

Achei que seria interessante compartilhar este impasse que eu acabei encontrando.