Bootstrap navbar toggler is not working in reactjs - reactjs

Question

My version of Bootstrap is 5.2.
navbar.jsx
import React, { Component } from "react";
import { NavLink, Link } from "react-router-dom";
class Navbar extends Component {
state = {};
render() {
return (
<nav className="navbar navbar-dark mb-2 navbar-expand-lg bg-dark">
<div className="container">
<Link className="navbar-brand" to="#">
Vidly
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ms-auto">
<li className="nav-item">
<NavLink className="nav-link" aria-current="page" to="/movies">
Movies
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/rentals">
Rentals
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/customers">
Customers
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/login">
Login
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Navbar;
Above is my code here on top navbar-toggle is not working.
I tried more things and read more documents about it but I'm unable to find a solution - kindly need your help.
Thanks in advance <3

Answer 1

I think "bootstrap" and "react-bootstrap" are different.
you can refer to this link
https://react-bootstrap.github.io