I am creating a project using React and ant design. I have created the navbar but it is not getting rendered properly. I am able to select an option but I cannot deselect it (like shown in the image, the project is in the initial stage so everything is a little misaligned). You can view the site here: http://192.168.56.1:3000/ .I am providing the code for app.js and navbar.jsx 
App.js:
const App = () => {
return (
<div className="app">
<div className="navbar">
<Navbar />
</div>
<div className="main">
<Layout>
<div className="routes">
<Switch>
<Route exact path="/">
<Homepage />
</Route>
<Route exact path="/cryptocurrencies">
<Cryptocurrencies />
</Route>
<Route exact path="/exchanges">
<Exchanges />
</Route>
<Route exact path="/news">
<News />
</Route>
<Route exact path="/crypto/:coinId">
<CryptoDetails />
</Route>
</Switch>
</div>
</Layout>
<div className="footer">
<Typography.Title level={5} style={{ color: 'white', textAlign: 'center' }}>
Krypton <br />
All rights reserved
</Typography.Title>
<Space>
<Link to="/">Home</Link>
<Link to="/exchanges">Exchanges</Link>
<Link to="/news">News</Link>
</Space>
</div>
</div>
</div>
);
}Navbar.jsx:
const Navbar = () => {
return (
<div className="nav-container">
<div className="logo-container">
<Avatar src={icon} size="large" />
<Typography.Title level={2} className="logo">
<Link to="/">Krypton</Link>
</Typography.Title>
{/* <Button className="menu-control-container">
</Button> */}
</div>
<Menu theme="dark">
<Menu.Item icon={<HomeOutlined />}>
<Link to="/">Home</Link>
</Menu.Item>
</Menu>
<Menu theme="dark">
<Menu.Item icon={<FundOutlined />}>
<Link to="/cryptocurrencies">Cryptocurrencies</Link>
</Menu.Item>
</Menu>
<Menu theme="dark">
<Menu.Item icon={<MoneyCollectOutlined />}>
<Link to="/exchanges">Exchanges</Link>
</Menu.Item>
</Menu>
<Menu theme="dark">
<Menu.Item icon={<BulbOutlined />}>
<Link to="/news">News</Link>
</Menu.Item>
</Menu>
</div>
);
}