Função editaCliente criando um NOVO cliente

Olá pessoal. Tudo beleza? Curso: FETCH API: CONSUMINDO UMA API REST COM JAVASCRIPT AULA 05 - EditandoDados Dos Clientes - Video 3

Minha função editaCLiente está criando um novo cliente ao invés de apenas editá-lo. Assim sempre que eu clico no botão Enviar duplica-se o cliente que editei.

Seguem os códigos:

clientes.js

const listarClientes = () => {
    return fetch('http://localhost:4000/clientes')
    .then( resposta => {
        return resposta.json()
    })
    .then( json => {
        return json
    })
}

const cadastrarClientes = (nome, cpf) => {
    const json = JSON.stringify({
        nome: nome,
        cpf: cpf
    })
    return fetch('http://localhost:4000/clientes/cliente',{
        method: 'POST',
        headers: {
            'Content-type' : 'application/json'
        },
        body: json
    })
    .then(resp => {
        return resp.body
    })
}
const deleteCliente = id => {
    return fetch(`http://localhost:4000/clientes/cliente/${id}`, {
        method: 'DELETE'
    })
}

const detalhaCliente = id => {
    return fetch(`http://localhost:4000/clientes/cliente/${id}`, 
    {
        method: 'GET'
    })
    .then(resposta => {
        return resposta.json()
    })
}

const editaCliente = (id, cpf, nome ) => {
    const json = JSON.stringify({
        nome: nome,
        cpf: cpf
    })
    return fetch(`http://localhost:4000/clientes/cliente/${id}`,{
        method: 'PUT',
        headers: {
            'Content-type' : 'application/json'
        },
        body: json
    })
    .then(resp => {
        return resp.body
    })
}

listagem-clientes.js

const removeCliente = id => {
    if(confirm('Deseja deletar o cliente?')){
        deleteCliente(id)
        document.location.reload()
    }
}
const corpoTabela = document.querySelector('[data-conteudo-tabela]')


const exibeCliente = (cpf, nome, id) => {
    const linha = document.createElement('tr')

    const conteudoLinha = 
        `<td>${cpf}</td>
         <td>${nome}</td>
         <button type='button' class='btn btn-danger' onclick='removeCliente(${id})'>Excluir</button>     
         <a href='edita-clientes.html?id=${id}'>
         <button type='button' class='btn btn-info'>Editar</button>
         </a>

         `

    linha.innerHTML = conteudoLinha
    return linha
}

listarClientes().then( exibe => {
    exibe.forEach( indice => {
        corpoTabela.appendChild( exibeCliente 
            (indice.cpf, indice.nome, indice.id))
    })
})

edita-cliente.js

const pegaURL = new URL(window.location)

const id = pegaURL.searchParams.get('id')

const inputCPF = document.querySelector('[data-cpf]')
const inputNome = document.querySelector('[data-nome]')

detalhaCliente(id).then( dados => {
    inputCPF.value = dados[0].cpf
    inputNome.value = dados[0].nome
})

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

const mensagemSucesso = (mensagem) => {
    const linha = document.createElement('tr')

    const conteudoLinha = 
        `
         <div class='alert alert-success' role= 'alert'>
            ${mensagem}
         </div>
         `

    linha.innerHTML = conteudoLinha
    return linha;
}

const mensagemErro = (mensagem) => {
    const linha = document.createElement('tr')

    const conteudoLinha = 
        `
         <div class='alert alert-warning' role= 'alert'>
            ${mensagem}
         </div>
         `

    linha.innerHTML = conteudoLinha
    return linha;
}

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

    if(!validaCPF(inputCPF.value)){
        alert('ESSE CPF NÃO EXISTE')
        return
    }

    editaCliente(id, inputCPF.value, inputNome.value )    
    .then
    (resposta => {
        if (resposta.status === 200){
            formEdicao.appendChild(mensagemSucesso(
                'Cliente Editado com Sucesso!'
            ))
        }
        else{
            formEdicao.appendChild(mensagemErro(
                'Erro ao editar o cliente'
            ))
        }
    }) 
})

Obrigado desde já.