Não aparece os dados inseridos

Olá, estou tendo problema na apresentação dos dados inseridos no formulário, eles simplesmente não aparecem na tabela, é gerada uma nova linha, porém vazia... Meu código HTML é o mesmo do curso, não tem alterações, meu código JS segue abaixo:

var campos = [
    document.querySelector('#data'),
    document.querySelector('#quantidade'),
    document.querySelector('#valor')
];

console.log(campos);

var tbody = document.querySelector('table tbody');

document.querySelector('.form').addEventListener('submit', function(event) {
    event.preventDefault();
    var tr = document.createElement('tr');

    campos.forEach(function(campo) {
        var td = document.createElement('td');
        td.textContext = campo.value;
        tr.appendChild(td);
    });

    var tdVolume = document.createElement('td');
    tdVolume.textContext = campos[1].value * campos[2].value;
    tr.appendChild(tdVolume);

    tbody.appendChild(tr);

    campos[0].value = '';
    campos[1].value = 1;
    campos[2].value = 0;

    campos[0].value = focus();
});
`

Eu já mudei o formato da data pra pt-BR, mas ainda aparece o seguinte warning no console: The specified value "undefined" does not conform to the required format, "yyyy-MM-dd".