動画ではliに対してaddEventListenerをつけていましたが、imgにつけてはだめですか？
動作に変わりはないように見えますが・・・。liにつける意味を教えてください。
何かルールがあるのでしょうか。
よろしくお願いします。

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

↓

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