以下の処理についてですが、

   li.addEventListener('click', () => {
      mainImage.src = image;
    });

クリックした画像がcurrentIndexとして認識される流れがよくわかりません。
最初の設定でcurrentIndexが0で、それが

mainImage.src = images[currentIndex];

を通してmain画像になるのはわかるのですが、その後に

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

上記のimageと結びついて、クリックした画像がcurrentIndexになることが理解しにくいです。
初歩的なことかもしれませんが、より簡単に教えていただければありがたいです。