Closing collapsible Bootstrap navbar on nav-item click in ReactJs is not working

I am using bootstrap's Navbar in React. Also using React's NavHashLink and Link instead of anchor tag.

Now I couldn't use the bootstrap properties data-bs-toggle and data-bs-target in NavHashLink or Link. So, hiding the collapsed Navbar on nav-item/nav-link click is not working.

Is there any solution without using anchor tag? Any suggestion or solution would be appreciated.

Bootstrap v5.0

Navbar Code:

<nav className="autohide navbar navbar-expand-lg bg-white">
  <div className="container-fluid navbar-container">
    <NavHashLink className="navbar-brand abs nav-bar-title" to="/">
      AshoDaanKori
    </NavHashLink>
    <button
      className="navbar-toggler ms-auto custom-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#main_nav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="main_nav">
      <ul className="navbar-nav ms-auto">
        <li className="nav-item active">
          <NavHashLink smooth to="/#our-story-section" className="nav-link">
            About
          </NavHashLink>
        </li>
        <li className="nav-item active">
          <NavHashLink to="/how-it-works" className="nav-link">
            How it works
          </NavHashLink>
        </li>
        <li className="nav-item active">
          <NavHashLink to="/discover" className="nav-link">
            Discover
          </NavHashLink>
        </li>
      </ul>
      <NavHashLink to="/sign-in" className="nav-link navbar-btn">
        START CAMPAIGN
      </NavHashLink>
    </div>{" "}
    //If not authenticated, rendered PublicNavbar elements )}
  </div>
</nav>