Método preventDefault no evento submit não está funcionando.

Boa tarde,

Estou com o problema de carregamento da página após enviar o formulário mesmo usando o preventDefault.

Constatei que se eu retirar a parte do código que faz a requisição POST, o preventDefault funciona.

Alguma sugestão?

cadastro-clientes.html (fornecido pelo professor).

<form data-form>
    <div class="container">
      <div class="form-group">
        <label>CPF</label>
        <input
          type="number"
          class="form-control"
          data-cpf
          placeholder="Digite seu CPF aqui"
        />
      </div>
      <div class="form-group">
        <label>Nome</label>
        <input
          type="text"
          class="form-control"
          data-nome
          placeholder="Digite seu nome aqui"
        />
      </div>
      <button type="submit" class="btn btn-primary">Enviar</button>
    </div>
  </form>

Scripts utilizados

<script src="./api/client.js"></script>
    <script src="./clientForm.js"></script>

clientForm.js

const form = document.querySelector('[data-form]');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const cpf = event.target.querySelector('[data-cpf]');
  const nome = event.target.querySelector('[data-nome]');

  registerClient(cpf.value, nome.value);
});

client.js

const listClients = () => {
  return fetch('http://localhost:4000/clientes')
    .then((res) => {
      return res.json();
    })
    .then((json) => {
      return json;
    });
};

const registerClient = (cpf, nome) => {
  const json = JSON.stringify({
    cpf: cpf,
    nome: nome,
  });
  return fetch('http://localhost:4000/clientes/cliente', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
    },
    body: json,
  }).then((res) => {
    return res.body;
  });
};

Att.