Creating a sidebar using reactjs and bootstrap - html

Question

I have a react project in which I need bootstrap sidebar which looks one of metronics https://preview.keenthemes.com/metronic/demo1/index.html theme. I tried hard but couldn't copy it as I am not master of CSS.I need sidebar same as metronics. How could I make sidebar with the rotating caret and icons.
I have tried react-bootstrap but couldn't make it. Do i need to add custom css?
Thanks in advance
My sidebar component :
function SideBar(){
return(
<nav className="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0">
<div className="container-fluid d-flex flex-column p-0">
<Link className="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="#">
<div className="sidebar-brand-icon rotate-n-15"></div>
<div className="sidebar-brand-text mx-3"><span>ProjectName </span>
</div>
<Button className="rounded-circle border-0" ></Button>
</Link>
<ul className="nav navbar-nav text-light">
<li className="nav-item">
<Link to="/index">
<FaIcons.FaTachometerAlt/>
<span>Dashboard</span>
</Link>
</li>
<li className="nav-item">
<Link to="/profile">
<FaIcons.FaUser/>
<span>Profile</span>
</Link>
</li>
<li className="nav-item">
<Link to="/table">
<FaIcons.FaTable/>
<span>Table</span>
</Link>
</li>
</ul>
</div>
</nav>
)
}