Using Axios and Pokemon API to display more than one Pokemon of same type

so I’m trying to randomly generate a Pokemon and then five more Pokemon of the same type to display on a web page. So far, this is what I have:

const pokemonName = document.querySelector(".pokemon-name");
const pokemonImage = document.querySelector(".pokemon-image");

function getPokemon() {
  const pokemonArr = []
  const random = Math.floor(Math.random() * 256 + 1)
  axios.get("https://pokeapi.co/api/v2/pokemon/1" + random)
  .then(function (response) {
    pokemonName.innerHTML = response.data.forms[0].name;
    pokemonImage.src = response.data.sprites.front_default;
    pokemonArr.push(pokemonName.innerHTML)
  })
  .catch(function (error) {
    pokemonName.innerHTML = "An error has occurred.";
    pokemonImage.src = "";
  });
}

I’ve managed to display a Pokemon although it’s still finnicky. My thought process was to append the name and image to an array or object but I’m having issues trying to apply that logic. This is my first time being introduced to the concept of APIs and using Axios. Would I be able to use a loop? How do I even go about comparing the types of Pokemon in the API?

Pokemon API: https://pokeapi.co/