JSを使用したカルーセルの実装がうまくいきません

閲覧ありがとうございます！

ウェブデザイナーで、フロントエンドに興味があるJS勉強中の初心者です。

JSでサムネイル付きカルーセル実装を試みていますが、clickイベントでエラーが出ており
困っておりこちらに質問させていただきました。

エラー文はこちらになります。↓
カルーセルのネクストボタンを7個目のスライドまで行くと一番最初に戻ることができず、
下記のエラーが出ます。（prevはうまく動作します。）

main.js:126 Uncaught TypeError: Cannot read property 'click' of undefined
at HTMLDivElement.<anonymous>

JavaScript
1
2const images = [
3
4    'images/image000.jpg',
5    'images/image001.jpg',
6    'images/image002.jpg',
7    'images/image003.jpg',
8    'images/image004.jpg',
9    'images/image005.jpg',
10    'images/image006.jpg'
11
12];
13
14let currentIndex = 0;
15const mainImage = document.getElementById('carousel__main');
16mainImage.src = images[currentIndex];
17
18for( let [index, image] of images.entries()){
19
20    const img = document.createElement('img');
21    img.src = image;
22
23    const li = document.createElement('li');
24    if(index === currentIndex){
25        li.classList.add('current');
26    }
27    
28    li.addEventListener('click',() => {
29        mainImage.src = image;
30        mainImage.classList.add('active');
31
32        setTimeout(() => {
33            mainImage.classList.remove('active');
34        }, 800);
35
36    const thumbnails = document.querySelectorAll('.carousel__thumbnails > li');
37    thumbnails[currentIndex].classList.remove('current');
38    currentIndex = index;
39    thumbnails[currentIndex].classList.add('current');
40
41    });
42
43    li.appendChild(img);
44    document.querySelector('.carousel__thumbnails').appendChild(li);
45}
46
47const next = document.getElementById('carousel__next');
48next.addEventListener('click', () => {
49let target = currentIndex + 1;
50if (target === images.length){
51    target === 0;
52}
53document.querySelectorAll('.carousel__thumbnails > li')[target].click();
54});
55
56const prev = document.getElementById('carousel__prev');
57prev.addEventListener('click', () => {
58let target = currentIndex - 1;
59if (target < 0){
60    target = images.length - 1;
61}
62document.querySelectorAll('.carousel__thumbnails > li')[target].click();
63});

HTML
1<section id="carousel" class="carousel">
2    <div class="carousel__main"><img id="carousel__main"></div>
3    <div id="carousel__prev" class="carousel__prev"><i class="fas fa-angle-left fa-5x"></i></div>
4    <div id="carousel__next" class="carousel__next"><i class="fas fa-angle-right fa-5x"></i></div>
5    <ul class="carousel__thumbnails"></ul>
6 </section>
7

お手数ですが、ご教授いただけますと幸いです。