Bootstrap не загружается при повторном рендеринге при прокрутке в React Project

Question

** Обновление и частичное решение: Я узнал, что если я удалю уникальный «ключ» из каждого сопоставленного элемента div, это частично решит эту проблему. Однако я знаю, что это анти-шаблон для удаления уникального ключа из сопоставленных элементов. Мой новый вопрос:

• Может кто-нибудь помочь мне понять, почему это происходит, хотя у меня настроен уникальный ключ?
• Если я нажму на изображение "nth", а затем переключусь на "Другой вариант пробега", у которого нет изображения "nth", карусель исчезнет и не вернется, если я не вернусь на страницу со списком и не вернусь. С чего бы это?

Исходное сообщение:

Я пытаюсь создать одностраничное приложение, которое использует загрузочную карусель для отображения изображений автомобилей.

Симптом проблемы:

• Всякий раз, когда я нажимаю на транспортное средство и перемещаю карусель к следующему изображению и нажимаю на другое транспортное средство в «Другие параметры пробега», образы загрузочной карусели исчезают.
• Проблема не возникает, если вы сохраняете изображение на первом изображении (это может быть потому, что оно объявлено отдельно, как показано ниже)

Всякий раз, когда пользователь щелкает транспортное средство (на главной странице списка транспортных средств или на странице «Другие пробеги» на странице сведений о транспортном средстве), он устанавливает текущее транспортное средство, и, таким образом, я предполагаю, что начальная загрузка перезагрузится с новыми данными из состояния. Тем не менее, это не работает.

Компоненты организованы таким образом (упрощено для целей этого вопроса)

BrowserContainer
|-DetailPageContainer
|  |-DetailPage
|    |-VehicleDetailImageCarousel
|      |-CarouselPictures
|      |-CarouselIndicator
|      |-CarouselButton
|-ProductListContainer

А внутри код CarouselPictures выглядит так:

  <div className="carousel-inner" data-interval="false">
    <div className="carousel-item active">
      <img className="d-block w-100" src={data[0]} alt="First slide" />
    </div>
    {data ? data.map((elem, i) => {
      //console.log('data', elem)
      if (i > 0) {
        return (
          <div key={shortid.generate()} className="carousel-item">
            <img
              className="d-block w-100"
              src={elem}
              alt="vehicle"
              onError={event => event.target.setAttribute('src', 'https://www.ispab.org/wp-content/themes/consultix/images/no-image-found-360x260.png')}
            />
          </div>
        );
      }
      return null;
    }) : null
    }
  </div>

Вы также можете перейти по этой ссылке, чтобы увидеть ее в действии (сохранит ее временно из-за ограничения трафика): *** из-за ограничений API, данные есть только у первой и второй машины. GIT (филиал WIP)