React Navbar active style state menu Link ReactJs - reactjs

Question

How can I make on clicking a specific menuItem to navigate to the component in https://codepen.io/mrhamburger/pen/XzjXGb.
I have used similar example But did i little of change because I am using Link imported from NextJs, But the problem is The Link itself and the active style are not connected, my problem is I Have menuItems as state and want to make the active state have a specific active design highlight (menu-item--active) when I click the box or div that containes the Link.
import React, { Component } from 'react';
import Link from 'next/link';
// import MenuItem from './MenuItem';
import '../style.scss';
class Sidebar extends React.Component {
constructor(props) {
super(props)
this.state = {
activeItem: '',
activeItemPosition: 0,
activeItemColor: '',
menuItems: [
{ text: 'ComponentA' },
{ text: 'ComponentB' },
{ text: 'ComponentC' },
{ text: 'ComponentD' },
{ text: 'ComponentE' }
],
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(activeItem) {
return e => {
e.preventDefault()
this.setState({
activeItem,
activeItemPosition: document.getElementById(activeItem).offsetTop,
activeItemColor: window.getComputedStyle(document.getElementById(activeItem)).getPropertyValue('background-color'),
})
}
}
render() {
const menuItems = this.state.menuItems.map(item => <MenuItem item={ item } handleClick={ this.handleClick }/>)
return (
<div className='menu-container'>
<span className='menu-item--active' style={{ top: this.state.activeItemPosition, backgroundColor: this.state.activeItemColor }} />
<div id="ComponentA" className="menu-item" onClick={ this.handleClick('ComponentA') } >
<Link href="/ComponentA" >
ComponentA
</Link>
</div>
<div id="ComponentB" className="menu-item" onClick={ this.handleClick('ComponentB') }>
<Link href="/ComponentB">
ComponentB
</Link></div>
<div id="ComponentC" className="menu-item" onClick={ this.handleClick('ComponentC') } >
<Link href="/ComponentC">
ComponentC
</Link>
</div>
<div id="ComponentD" className="menu-item" onClick={ this.handleClick('ComponentD') }>
<Link href="/ComponentD">
ComponentD
</Link></div>
<div id="ComponentE" className="menu-item" onClick={ this.handleClick('ComponentE') } >
<Link href="/ComponentE">
ComponentE
</Link>
</div>
{/* { menuItems } */}
</div>
)
}
}
function MenuItem(props) {
return (
<div>
</div>
)
}
export default Sidebar;
So, my problem is when I click on any item on the menu, if I clicked the text it shows the component but the active still doesn't highlight as active item unless i click the item itself without the link or text.
Please Help, I want to be able to click on any item so it stays highlighted as active style and shows the right component.
Thanks in advance.