реагировать: скользить слайдер. изменить активный слайд

Question

Я получил компонент слайдера. Это не работает в настоящее время. У меня есть несколько вопросов:

1. Как установить только первый div как «активный» слайд при первой загрузке.
2. Как удалить / добавить класс «active» в правильный div, при переходе по следующей / предыдущей ссылке - функция «changeSlide».

import React from 'react';
import cn from 'classnames';
import _ from 'lodash';

class Carousel extends React.Component {
  changeSlide(event) {
   const direction = event.currentTarget.dataset.slide; // next/prev
   const activeElement = document.querySelector('.active'); // active div
  }

  render() {
    const { images } = this.props;
    return (
      <div id="carousel" className="carousel slide" data-ride="carousel">

        <div className="carousel-inner">
          {images.map((item) => (
            <div className={`carousel-item active`} key={_.uniqueId()}>
              <img alt="" className="d-block w-100" src={item} />
            </div>
          ))}
        </div>

        <a className="carousel-control-prev" href="#carousel" 
           role="button" data-slide="prev" onClick={this.changeSlide}>
          <span className="carousel-control-prev-icon"></span>
          <span className="sr-only">Previous</span>
        </a>

        <a className="carousel-control-next" href="#carousel"
           role="button" data-slide="next" onClick={this.changeSlide}>
          <span className="carousel-control-next-icon"></span>
          <span className="sr-only">Next</span>
        </a>
      </div>
    );
  }
}

Может кто-нибудь помочь с функцией «changeSlide» или дать совет, как это сделать?