Swiperでナビゲーションボタンをクリックしたとき、サムネイルにactiveクラスをつけたい

Swiperでナビゲーションボタンをクリックしたとき、サムネイルにactiveクラスをつけたいです。
nextボタンを押したときは、すでにactiveクラスを持っている要素からクラスを取り、次の要素にクラスをつけて、prevボタンを押したときは前の要素にクラスをつけたいのですが、item.querySelector(".active")としたときになぜかnullとなってしまいます。

js
1console.log(item.classList.contains('active'));

とするとtrueを返すのに、item.querySelector(".active")でnullになる理由がわかりません。
以下はコードです

php
1<div class="gallery">
2    <div class="swiper-container">
3      <div class="swiper-wrapper">
4          <div class="swiper-slide">
5           <img src="">
6          </div>
7　　　　　　　　　　　　　　　　　　<div class="swiper-slide">
8           <img src="">
9          </div>
10　　　　　　　　　　　　　　　　　　<div class="swiper-slide">
11           <img src="">
12          </div>
13      </div>
14
15      <!-- ナビゲーションボタン -->
16      <div class="swiper-button swiper-button-prev sp"></div>
17      <div class="swiper-button swiper-button-next sp"></div>
18
19      <div class="gallery-nav">
20        <!-- ナビゲーションボタン -->
21        <div class="swiper-button swiper-button-prev pc"></div>
22        <div class="swiper-button swiper-button-next pc"></div>
23        <!-- ページネーション -->
24        <div class="swiper-pagination"></div>
25      </div>
26
27
28    </div>
29
30    <!-- サムネイル -->
31    <ul class="thumb__list">
32        <li class="thumb__list__item">
33          <a class="thumb__list__item__link" href="javascript:void(0);">
34          <img src="">
35          </a>
36        </li>
37　　　　　　　　　　　　　　　 <li class="thumb__list__item">
38          <a class="thumb__list__item__link" href="javascript:void(0);">
39          <img src="">
40          </a>
41        </li>
42　　　　　　　　　　　　　　　 <li class="thumb__list__item">
43          <a class="thumb__list__item__link" href="javascript:void(0);">
44          <img src="">
45          </a>
46        </li>
47    </ul>
48  </div>

js
1// サムネイルの要素
2  const thumbLinks = document.querySelectorAll(".thumb__list__item__link")
3  const thumbBlock = document.querySelectorAll(".thumb__list__item")
4  const thumbArrow = document.querySelectorAll(".swiper-button")
5  
6  window.addEventListener('DOMContentLoaded', function(){
7      // 画像切替
8  for (let index = 0; index < thumbLinks.length; index++) {
9    thumbLinks[index].addEventListener("click",()=>{
10      PageSwiper.slideTo(index);
11      })
12    }
13  
14    // 枠線の付替
15    if(thumbBlock[0]){
16      thumbBlock[0].classList.add('active');
17    }
18    
19  thumbBlock.forEach((item,index)=>{
20  item.onclick = function(){
21    this.parentNode.querySelector(".active").classList.remove('active');
22    this.classList.add('active');
23  }
24  });
25
26  //ここが質問のコード
27  thumbBlock.forEach((item,index)=>{
28    thumbArrow[0].onclick = function(){
29      item.querySelector(".active").previousElementSibling.classList.add('active')
30    }
31    thumbArrow[1].addEventListener("click",()=>{
32      console.log(item.classList.contains('active'));
33      if(item.classList.contains('active')){
34        console.log(item.querySelector(".active"));
35　　　　　　　　　　　　　　　item.querySelector(".active").nextElementSibling.classList.add('active')
36      // item.classList.remove("active")
37      // item.nextElementSibling.classList.add("active")
38      }
39      
40    })
41  });
42
43  });
44  });