How to fix a bug with navigation?

There is a component with navigation, which when clicked links change color( it is added .active ). The problem is that if you click on several points of navigation, they all will change color, what can I do to make clicking on another item the previous item ignited was removed .active?( I'm new to React, not beat)

Here's the screenshots, if I incorrectly formulated the question:
Nav.jsx:

import React {Component} from 'react';

NavLink import from './NavLink';

import '../css/main.css';
import $ from "jquery";

import logo from './img/logo.png';
class Nav extends Component{
constructor(props){
super();
}
menuClick(){
$(this.refs.ClickItem).slideToggle(500)
}
render(){
return(
<nav>
 <a href="#" classname="menu-trigger" onclick="{()=">this.menuClick()}>Open menu</a>
 <div classname="container">
 <div classname="logo clearfix">
 <img src="{logo}" alt>
</div>
 <div classname="nav__items">
 <ul ref="ClickItem">
 the <li><navlink href="#">Home</navlink></li>
 the <li><navlink href="#">About us</navlink></li>
 the <li><navlink href="#">Shop</navlink></li>
 the <li><navlink href="#">Contact us</navlink></li>
</ul>
</div>
</div>
</nav>
);
}
}

export default Nav;

NavLink.jsx:

import React {Component} from 'react';

class NavLink extends Component{
constructor(props){
super(props);
 this.state = {
 active: "
};
 this.handleClick = this.handleClick.bind(this);
}
handleClick(){
 this.setState({active: 'true'});
}
render(){
return(
 <a onclick="{this.handleClick}" classname="{`'${this.state.active" ? 'active' : "}`} href="href" {...this.props}>{this.props.children}</a>
);
}
}
export default NavLink;