いつも楽しく学ばせていただいております。

今回の動画の復習をしていて、下記のように 記載したところ、サムネイルの大きな番号をクリックしたあとに小さな番号をクリックするとエラーが発生し、クリックしたサムネイルにcurrentクラスが付与されず、正しく動きません。
（※小さな番号から大きな番号をクリックする分には問題なく動作します。）

動画では、const thumbnails = document.querySelectorAll('.thumbnails>li');を li.addEventListener('click', () => {}`の中に入れていてエラーが発生していませんが、私が書いたように外で記載すると下記のエラーが発生してしまいます。

 Uncaught TypeError: Cannot read property 'classList' of undefined
    at HTMLLIElement.<anonymous> 

const thumbnails = document.querySelectorAll('.thumbnails>li');は.thumbnailsli直下のli要素をすべて取得するコードなのは理解していますが、記載位置によって正しく動かなくなる理由がよくわかりません。私が記載した位置でも問題なく動く気がするのですが、なぜ動かないのでしょうか。
また、なぜ動画の位置で記載しないといけないのかご教示いただけますと幸いです。
よろしくお願いいたします。

 images.forEach((image,index) => {
  const img = document.createElement('img');
  img.src = images[index];

  const li = document.createElement('li');
  li.appendChild(img);
  document.querySelector('.thumbnails').appendChild(li);

  if (currentIndex === index) {
     li.classList.add('current');
  }

  const thumbnails = document.querySelectorAll('.thumbnails>li');//この位置だとエラーが発生する

  li.addEventListener('click', () => {
     mainImage.src = image;
     // const thumbnails = document.querySelectorAll('.thumbnails>li');　エラーが発生しない
     thumbnails[currentIndex].classList.remove('current');
     currentIndex = index;
     thumbnails[currentIndex].classList.add('current');
  })