Is there anyway to highlight active page and to use the whole Item as Link?

I like this component but it can be better with dynamic active tab. I primarily want to highlight the active Link and to use the whole "li" as a Link component so that you can click anywhere on it and it will work.

Try this:

<SideNav
  ...
  items={navItems}
/>

const navItems = [
    <NavLink activeStyle={styles} onClick={onHideNav} to="/" exact>Home</NavLink>,
    <NavLink activeStyle={styles} onClick={onHideNav} to="/login">Login</NavLink>,
...
]

const styles = {
    color: 'black',
    fontWeight: 'bold',
    cursor: 'default',
    pointEvents: 'none',
  };