Comportamento anormal da linha de total

Oi pessoal, tudo bom?

Estou tentando realizar a parte de calculo do total e estou com um problema. Ao inserir a primeira negociação tudo dá certo, porém, ao inserir a segunda, ao invés de ela ser inserida como em cima da linha de total e o total ser atualizado, ela é inserida abaixo e uma nova linha com o total é inserida.

Segue o código:

<table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>DATA</th>
                <th>QUANTIDADE</th>
                <th>VALOR</th>
                <th>VOLUME</th>
            </tr>
        </thead>

        <tbody id="tbody"></tbody>

    </table>

--

template(lista){
        return lista
        .negociacoes
        .map(
            n => {
            return `

            <tbody>
                <tr>
                    <td>${DateHelper.dataParaTexto(n.data)}</td>
                    <td>${n.quantidade}</td>
                    <td>${n.valor}</td>
                    <td>${n.volume}</td>
                </tr>
            </tbody>
            <tfooter>
                <tr>
                    <td colspan="3"></td>
                    <td>
                        ${ lista.negociacoes.reduce((total, n) => total + n.volume, 0.0)}
                    </td>
                </tr>
            </tfooter>
            `}).join('');

    }

Eu inclusive pensei que era por ter feito conforme vi uma sugestão aqui mesmo no fórum, de manter o thead no html e tratar apenas o tbody no js, porém ao colocar todo o código html da tabela o mesmo resultado era apresentado.

Alguém consegue me dar uma luz?