Os valores vindos do db.json estão trocados no HTML

Gostaria que alguém me ajudasse a solucionar o motivo dos valores estarem vindo invertidos.

Quando eu coloco "preço" aparece o ID, quando eu colono o "nome" aparece o "preço" e quando eu coloco o ID aparece undefined.

Coloquei um console.log dos "objetos" json e do preco para mostrar o que acontece.

Esse é o código da API:

async function listaProdutos() {
    const resposta = await fetch(`http://localhost:3000/produtos`)
    const respostaConvertida = await resposta.json();
    console.log(respostaConvertida)
        return respostaConvertida;
}

async function criaProduto(categoria, descricao, nome, preco, url) {
    const resposta = await fetch(`http://localhost:3000/produtos`, {
        method: 'POST',
        headers: {
            'Content-type' : 'application/json'
        },
        body: JSON.stringify({
            categoria: categoria,
            descricao: descricao,
            nome: nome,
            preco: preco,
            url: url
        })
    })
    const respostaConvertida = await resposta.json()
        return respostaConvertida;
}

async function deletaProduto(id) {
    const resposta = await fetch(`http://localhost:3000/produtos/${id}`, {
        method: 'DELETE'
    })
    const respostaConvertida = resposta.json();
        return respostaConvertida;
}

export const produtoService = {
    listaProdutos,
    criaProduto,
    deletaProduto
};

E esse é o código para mostrar no HTML:

import { produtoService } from "./fetch.js";

function mostraLinha(url, descricao, nome, preco, id) {
    console.log(preco)
    const mostraProduto = document.createElement('div');
    if (mostraProduto.classList) {
        mostraProduto.classList.add("item");
    } else {
        mostraProduto.className = "item";
    };
    const conteudo = `
            <a href="#" class="topicos__imagem__link">
                <img src="${url}" alt="${descricao}" class="topicos__imagem">
            </a>
            <p class="topicos__descricao">${nome}</p>
            <p class="topicos__valor">${preco}</p>
            <a href="#" class="topicos__link">Ver produto</a>
    `
    mostraProduto.innerHTML = conteudo;
    mostraProduto.dataset.id = id;
    return mostraProduto;
};

const starwars = document.querySelector('[data-starwars]');
const consoles = document.querySelector('[data-consoles]');
const diversos = document.querySelector('[data-diversos]');

const render = async () => {
        try {
            const listaProdutos = await produtoService.listaProdutos();

            listaProdutos.forEach(elemento => {
                if(elemento.categoria == 'Star Wars') {
                    starwars.appendChild(mostraLinha(elemento.url, elemento.nome, elemento.preco, elemento.id));
                } else if(elemento.categoria == 'Consoles') {
                    consoles.appendChild(mostraLinha(elemento.url, elemento.nome, elemento.preco, elemento.id));
                } else {
                    diversos.appendChild(mostraLinha(elemento.url, elemento.nome, elemento.preco, elemento.id));
                }
            });
        } catch(erro) {
            console.log(erro)
            window.location.href="./erro.html"
        }
}

render();

Esse é o Print de como está ficando: