Как подружить JQuery с React?

"this.refs.ClickItem.slideToggle is not a function" пишет в ответ, в конструкторе пытался забиндить, пишет "Cannot read property 'bind' of undefined."
Я немного переделал код, так как он вообще не воспроизводился.

import React, {Component} from 'react';

import $ from "jquery";
class Nav extends Component{
    constructor(props){
        super();
        this.refs.ClickItem = this.refs.ClickItem.bind(this);
    }
    menuClick(){
        this.refs.ClickItem.slideToggle(500);
    }
    updateDimensions(){
        if ($(window).width()> 500){
        		this.refs.ClickItem.removeAttr('style');
        }
    }
    componentDidMount(){
        window.addEventListener("resize", this.updateDimensions)
    }
    componentWillUnmount() {
        window.removeEventListener("resize", this.updateDimensions);
    }
    render(){
    return(
    <nav>
        <a href="#" className="menu-trigger" onClick={()=>this.menuClick()}>Open menu</a>
        <div className="container">
            <div className="logo clearfix">
            <img src="img/logo.png" alt=""/>
        </div>
        <div className="nav__items">
            <ul  ref="ClickItem">
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </div>
        </div>
    </nav>
    );
    }
}

export default Nav;

Vladislav, $(this.refs.ClickItem).slideToggle()

Роман Александрович, спасибо! Только у меня не работало со slideToggle и я поменял на slideDown и всё работает