Problem with React Router NavLink and activeClassName - css

Question

My First problem is that, I have three links in menu. Home, About and Add Food. NavLink activeClassName works as expected , except for this : Home always stays active, even when i move to other links.
In the screenshot, i've moved to /about page, but Home *li stays active.
Secondly, for some reason, border radius doesn't work on these items. Is it because they have substantial padding?
my code :
import React from "react";
import { NavLink } from "react-router-dom";
const Navbar = (props) => {
return (
<nav>
<ul>
<NavLink to="/" activeClassName="active-navlink">
<li>Home</li>
</NavLink>
<NavLink to="/about" activeClassName="active-navlink">
<li>About</li>
</NavLink>
<NavLink to="/add-food" activeClassName="active-navlink">
<li>Add Food</li>
</NavLink>{" "}
</ul>
</nav>
);
};
export default Navbar;
and my Router, where all the links are handled :
<Router>
{" "}
<div className="App">
<Navbar></Navbar>
<Switch>
<Route path="/about" component={About}></Route>
<Route
path="/products/:food"
render={(props) => (
<IndividualProduct {...props}></IndividualProduct>
)}
></Route>
<Route
path="/"
exact
render={(props) => (
<Home
{...props}
groceryList={groceryList}
orderTotal={orderTotal}
setOrderTotal={setOrderTotal}
productsInCart={productsInCart}
updateProductsInCart={updateProductsInCart}
></Home>
)}
></Route>
<Route component={NotFound}></Route>
</Switch>
</div>
</Router>

Answer 1

1.
Add exact to Navlink of '/':
<NavLink to="/" activeClassName="active-navlink" exact={true} >
<li>Home</li>
</NavLink>
Styling sample:
https://codepen.io/k3no/pen/OXgXOb