Gif not updating in my app using Giphy API

Question

I'm a beginner in Javascript and in order to practice async JS using "async" and "await" I build a small app using random word generator in combination with Giphy API.

Below is the HTML & JS code I wrote: enter image description here enter image description here

let initialButton = document.querySelector("#initial-button");

initialButton.addEventListener("click", getWordAsync);


function displayWord(response) {
  let word = response.data;
  let wordResult = document.querySelector("#word-result");
  wordResult.innerHTML = `Your word is ${word}`;
}

function showGif(response) {
  console.log(response.data.data[0].images.downsized.url);
  let gif = response.data.data[0].images.downsized.url;
  let gifResult = document.querySelector("#gif-result");
  gifResult.innerHTML = `<img src="${gif}" alt="gif">`;
}

async function getWordAsync(event) {
  event.preventDefault();
  let responseWord;
  try {
    responseWord = await axios.get(
      "https://random-word-api.herokuapp.com/word"
    );
    displayWord(responseWord);
  } catch (error) {
    console.log(error);
    console.error("oops, error! MÖÖP, MÖÖP!");
  }

  try {
    let apiKey = "Hidden to keep it private";
    let responseGif = await axios.get(
      `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=${responseWord}`
    );
    showGif(responseGif);
  } catch (error) {
    console.log(error);
    console.error("oops, error! MÖÖP, MÖÖP, MÖÖP!");
    let gifResult = document.querySelector("#gif-result");
    gifResult.innerHTML = `<h2>Shoot, nothing found for your search word! This app sucks!</h2>`;
  }
}

It seems he image does not match my search word and it's also not updating whenever I click my button.

As mentioned above I tried to build an app, that generates a random word and uses this said word to search for a GIF.

However, the GIF does not seem to match the word, and it's not updating when the button is clicked again.