images do not match the card from pokeapi.co

Question

I'm having problems with my front end in JavaScript. The names are correct, but the images do not match. it is not getting the pokemon data in the correct order.

let currentPageUrl = 'https://pokeapi.co/api/v2/pokémon/';

window.onload = async() => {
  try {
    await loadCharacters(currentPageUrl);
  } catch (error) {
    console.log(error);
    alert('Erro ao carregar cards');
  }

  const nextButton = document.getElementById('next-button');
  nextButton.addEventListener('click', loadNextPage);

  const backButton = document.getElementById('back-button');
  backButton.addEventListener('click', loadPreviousPage);
};

async function loadCharacters(url) {
  const mainContent = document.getElementById('main-content');
  mainContent.innerHTML = '';
  try {
    const response = await fetch(url);
    const responseJson = await response.json();

    responseJson.results.forEach((character) => {
          const card = document.createElement("div");
          card.style.backgroundImage = `url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${character.url.replace(/\D/g, "")}.png')`

          card.className = "cards"
          const characterNameBG = document.createElement("div")
          characterNameBG.className = "character-name-bg"
          const characterName = document.createElement("span")
          characterName.className = "character-name"
          characterName.innerText = `${character.name}`
          characterNameBG.appendChild(characterName)
          card.appendChild(characterNameBG)