returning first value [object Promise] [duplicate]

const wordEl = document.getElementById('word');    
let selectedWord = [];
let correctLetters = [];

let apiUrl = 'https://random-word-api.herokuapp.com/word';

async function getData(url) {
  let response = await fetch(url);
  let data = await response.json();
  selectedWord = await data;
}
selectedWord = getData(apiUrl);

async function displayWord() {
  wordEl.innerHTML = `
    ${selectedWord
      .toString()
      .split('')
      .map(
        (letter) =>
          `
          <span class="letter">
            ${correctLetters.includes(letter) ? letter : ''}
          </span>
        `
      )
      .join('')}
  `;
}

window.addEventListener('keydown', (e) => {
  if (selectedWord.toString().includes(e.key)) {
    if (!correctLetters.includes(e.key)) {
      correctLetters.push(e.key);
      displayWord();
    }
  }
});

displayWord();

Hello my first value returning [object promise]. After pressing any key value returning what I want.

How can i get normal value before clicking any key? Thank you!