Как подключить jquery плагин в react приложении

Мой компонент React "должен" рендерить немного HTML, а потом применять к нему jQuery-плагин.

import React from 'react';
import $ from 'jquery';
import 'owl.carousel';    
class Slider extends React.Component {
  componentDidMount() {
    this.$slider = $(this.sliderContainer);
    this.$slider.owlCarousel();
  }
  render() {
    const images = this.props.images;
    return (
      <div id="owl-slide"
           className="owl-carousel"
           ref={el => this.sliderContainer = el}>
        {images.map((img, index) => (
          <div key={index} className="item">
            <img alt="pic" src={img} />
          </div>
         ))}
      </div>
    );
 };
export default Slider;

Но вместо этого прямо в момент импорта плагина я получаю:

TypeError: Cannot read property 'fn' of undefined

  1709 |  * @todo Navigation plugin `next` and `prev`
  1710 |  * @public
  1711 |  */
> 1712 | $.fn.owlCarousel = function(option) {
  1713 |    var args = Array.prototype.slice.call(arguments, 1);
  1714 | 
  1715 |    return this.each(function() {

внутри componentDidMount $.fn определён. Подскажите, как в принципе это должно работать?