Карусель предыдущей и следующей кнопки в React

Question

Я искал способ реализовать кнопки «предыдущий» и «следующий» в карусели материализации в пределах ReactJS. Может кто-нибудь помочь мне определить, что я делаю не так? В настоящее время я обращаюсь к плагину через встроенный скрипт и следую за документами на материализованном сайте.

class Home extends Component {
  componentDidMount() {
    const M = window.M;
    document.addEventListener("DOMContentLoaded", function() {
      var elems = document.querySelectorAll(".carousel");
      var instance = M.Carousel.init(elems, {
        fullWidth: true,
        indicators: true
      });

      var handlePrevClick = () => {
        instance.prev();
      };

      var handleNextClick = () => {
        instance.next();
      };
    });
  }

  render() {
    return (
      <div className="project-details-div">
        <h3 className="section-title">Projects</h3>
        <br></br>
        <div className="home">
          <h4 className="center">Home</h4>

          <div className="carousel">
            <div className="carousel-fixed-item center middle-indicator">
              <div className="left">
                <a
                  className="movePrevCarousel middle-indicator-text waves-effect waves-light content-indicator"
                  onClick={this.handlePrevClick}
                >
                  <i className="material-icons left  middle-indicator-text">
                    chevron_left
                  </i>
                </a>
              </div>

              <div className="right">
                <a
                  className=" moveNextCarousel middle-indicator-text waves-effect waves-light content-indicator"
                  onClick={this.handleNextClick}
                >
                  <i className="material-icons right middle-indicator-text">
                    chevron_right
                  </i>
                </a>
              </div>
            </div>
            <a className="carousel-item" href="#one!">
              <img src="https://lorempixel.com/250/250/nature/1" alt="" />
            </a>
            <a className="carousel-item" href="#two!">
              <img src="https://lorempixel.com/250/250/nature/2" alt="" />
            </a>
          </div>
        </div>
      </div>
    );
  }
}````