Responsive Navbar-Toggle button not working - reactjs

Question

I am trying to do responsive navbar by using bootstrap in reactjs.I have update the show in state so as i do like show or hide the element but the toggle button is not trigger.If i use the script link in bootstrap its working but i don't want to use the scripting links and want to update manual.so help me out.
Here is my code:
import React, { Component } from "react";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
};
}
showToggle = () => {
this.setState({
show: false,
});
};
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="navbar-brand">
<img
alt="logo"
src="./images/or.png"
width="100px"
height="30"
className="d-inline-block align-top img-fluid"
/>
{/* <span className="nav-brand">Ortho Life Hospital</span> */}
</div>
<button
className="navbar-toggler"
type="button"
// data-toggle="collapse"
// data-target="#navbarSupportedContent"
// aria-controls="navbarSupportedContent"
// aria-expanded="false"
// aria-label="Toggle navigation"
onClick={this.showToggle}
>
<span className="navbar-toggler-icon"></span>
</button>
{this.state.show ? (
<div
className="collapse navbar-collapse"
id="navbarSupportedContent"
>
<ul className="navbar-nav ml-auto">
<li className="nav-item ml-5">
<a className="nav-link" href="/">
Home
</a>
</li>
<li className="nav-item ml-5">
<div className="dropdown">
<a
className="nav-link"
href="/about"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
About Us
</a>
<div
className="dropdown-menu"
aria-labelledby="dropdownMenuButton"
>
<a className="dropdown-item" href="/about/#history">
History
</a>
<a className="dropdown-item" href="/about/#vision">
Vision and Mission
</a>
<a className="dropdown-item" href="/about/#whyortho">
Why Ortho?
</a>
</div>
</div>
</li>
<li className="nav-item ml-5">
<div className="dropdown">
<a
className="nav-link"
href="/department"
id="dropDownDepartment"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Department
</a>
<div
className="dropdown-menu"
aria-labelledby="dropDownDepartment"
>
<a
className="dropdown-item"
href="/department/#medical"
>
Medical
</a>
<a
className="dropdown-item"
href="/department/#allied"
>
Allied
</a>
</div>
</div>
</li>
<li className="nav-item ml-5">
<a className="nav-link" href="/media">
Media
</a>
</li>
<li className="nav-item ml-5">
<a className="nav-link" href="/contactus">
Contact Us
</a>
</li>
</ul>
</div>
) : null}
</nav>
</div>
</div>
</div>
);
}
}