Getting an undefined before my order list, the first item on the list is blank on the webpage

let correctAnswers = [''];
let incorrectAnswers = [''];


let quiz = [
    ['What is my name?','marie'],
    ['What color is the sky?', 'blue'],
    ['Where do I learn to code?', 'treehouse'],
    ['What color is the grass?', 'green'],
    ['What is my hobby?', 'coding']
  ];


  let correctCounter = 0;


  for (let i = 0; i < quiz.length; i++) {
    let input = prompt(quiz[i][0]); 

    if (input.toLowerCase() === quiz[i][1]) { 
    correctCounter ++; 
    correctAnswers.push( `${quiz[i][0]}` ); 
        } else {
        incorrectAnswers.push(`${quiz[i][0]}`); 
      }
}



let display = (arr) => {
    let list = '';
    for (let i = 0; i < arr.length; i++) {
    list += `<li>${arr[i]}</li>`;
    }
    return list;
};



let html = `<h2>You got <strong>${correctCounter} question(s)</strong> out of 3 correct!</h2><br>

<h2>Correct Answers:</h2> 
<ol>
${display(correctAnswers)}
</ol>
<h2>Incorrect Answers:</h2>
<ol>
${display(incorrectAnswers)}
</ol>
`;


document.querySelector('main').innerHTML = html;