How to get a Bootstrap nav bar to work in React

My NavBar component started off looking like this:

import React from 'react'
import { Link } from 'react-router-dom'

const NavBar = () => {
  
  return (
    <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <div className="container-fluid">
        <Link className="navbar-brand" to="#">Fixed navbar</Link>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarCollapse">
          <ul className="navbar-nav me-auto mb-2 mb-md-0">
            <li className="nav-item" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
              <Link className="nav-link" to="/">Home</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/multiplication" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Multiplication</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/division" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Division</Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}

export default NavBar

But then the React Link elements were not working (they didn't do anything when I clicked on them).

After some fiddling around, I found that it was the data-bs-target attribute that was preventing the Links from working.

But removing the data-bs-target attribute then prevents the menu from closing when a Link is clicked on (the menu appears on small screens). I could still make the menu appear by clicking the hamburger icon, but it would not slide back up after a Link was clicked.

It seemed like there should be a simple solution to this, but I spent a few hours trying to figure it out, and it got more complicated than I care to remember. But in the end I came up with this solution:

import React, {useRef} from 'react'
import { Link } from 'react-router-dom'
import {Collapse} from 'bootstrap'

const NavBar = () => {

  const menu = useRef();

  function hideMenu(){
    if(menu.current.classList.contains("show")){
      Collapse.getInstance(menu.current).hide();
    }
  }

  return (
    <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">
          <i className="bi bi-calculator" style={{color:"red"}}></i>
        </Link>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" ref={menu} id="navbarCollapse">
          <ul className="navbar-nav me-auto mb-2 mb-md-0">
            <li className="nav-item">
              <Link className="nav-link" onClick={hideMenu} to="/">Home</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" onClick={hideMenu} to="/multiplication">Multiplication</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" onClick={hideMenu} to="/division">Division</Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}

export default NavBar