Table não aparece dentro do Modal

Eu estou tentando fazer uma table dentro de um modal, quando o modal é aberto a table aparece sem informações e depois desaparece, e apartir daí a modal fica vazia.
Vou deixar abaixo o código da modal com a table dentro:

<div class="modal" tabindex="-1" role="dialog" id="modalContato">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Números</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="corpoTelefone">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Ddd</th>
<th scope="col">Número</th>
<th scope="col">Tipo</th>
</tr>
</thead>
<tbody id="corpoTabelaInfo">
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="align-self-end ml-auto">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>

Abaixo a função que cria as linhas da table:

function createRowTableContactInfo (telefone){

let tr = document.createElement('tr')

let tdDdd = document.createElement('td');
let tdTel = document.createElement('td');
let tdType_phone = document.createElement('td');

tdDdd.innerHTML = telefone.ddd
tdTel.innerHTML = telefone.tel
tdType_phone.innerHTML = telefone.type_phone

tr.append(tdDdd)
tr.append(tdTel)
tr.append(tdType_phone)

document.getElementById('corpoTabelaInfo').append(tr);
}

Função que inicia o modal:

function initEventListinerModal(){
$('body').on('click','.btn-info',function(e){
console.log(e.target.id)
let contact_id = e.target.id
fetch(`http://localhost:8000/api/phone/$`,{
method:'GET',
})
.then(data => data.json())
.then(data => {
document.getElementById('corpoTelefone').innerHTML = '';
data.telefones.forEach(telefone => {
createRowTableContactInfo(telefone)
})
})
$('#modalContato').modal('show')
})
}