React bootstrap custom nav link active style is not working - reactjs

Question

Actually I want to make an active style of tab menu as hover style.
Even I tried with activeClassName="selected" not working. Can anyone help the issue which I am trying?
CSS which I am using
.my-navbar{
color: #037979;
font-size: 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
line-height: 1.6rem;
text-decoration: none;
margin: 10px 10px 10px 10px;
}
.my-navbar:visited {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
}
.my-navbar:hover {
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #c10944;
font-size: 16px;
background-color: #61dafb;
}
.active {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #c10944;
font-size: 16px;
background-color: #61dafb;
}
react-bootstrap, react-router-dom these are the import using
<Router>
{/*header Menu Bar*/}
<div className="mycontainer">
<Navbar bg="transparent" expand="lg">
<Navbar.Brand>
<div>
<img src={logo} alt="logo" width="200" />
{/* <img src={process.env.PUBLIC_URL + "./images/logo.png"} alt="mypic" width="200" /> */}
</div>
</Navbar.Brand>
<Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
<Navbar.Collapse id="navbar-toggle" style={{marginTop: 30}}>
<Nav className="ml-auto" bsStyle="tabs" >
<Link activeClassName="selected" className="my-navbar" to="/">Home</Link>
<Link activeClassName="selected" className="my-navbar" to="/about">About</Link>
<Link className="my-navbar" to="/services">Services</Link>
<Link className="my-navbar" to="/contact">Contact</Link>
<Link className="my-navbar" to="/galleries">Galleries</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
{/*Slider Bar*/}
<Slidingmain />
<div style={{ paddingTop: 50 }}>
<Route defaultActiveKey="/home" path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />} className="container-full"/>
<Route path="/about" render={() => <AboutPage title={this.state.about.title} subTitle={this.state.about.subTitle} text={this.state.about.text} />} />
<Route path="/services" render={() => <ServicesPage title={this.state.services.title} />} />
<Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
<Route path="/galleries" render={() => <GalleriesPage title={this.state.galleries.title} />} />
<Footer />
</div>
</Router >

Answer 1

Please use <NavLink activeClassName="active"> instead of <Link activeClassName="selected">.
import { NavLink } from 'react-router';
For more information, visit https://reacttraining.com/react-router/web/api/NavLink

Answer 2

If using react-bootstrap Nav.Link you can use
defaultActiveKey like this:
<Nav defaultActiveKey="#home" className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>