Issue with Syncing Thumbnails and Images in Swiper with Loop Enabled

[shans-05]

I am using react-swiper to create a carousel where the main images and thumbnails are synchronized. When either the thumbnails or the main image slide, the other should update accordingly. However, I am facing the following issues:

• When looping through a certain number of slides, the synchronization works properly.
• After a point, the active thumbnail slides start moving in the backward direction, and the wrong slide is marked as active.
  I have provided a link demonstrating the behavior.
  https://codesandbox.io/p/devbox/6ngkc5

Expected Behavior:
The main image and thumbnails should always stay in sync and move forward unless the user explicitly slides on the thumbnails or the main image, in which case they should update accordingly.

Thank you in advance for your help and suggestions!