How to close the bootstrap offcanvas when route changes?

Question

I've used the simple bootstrap 5 offcanvas menu not the react-bootstrap offcanvas. I want the offcanvas to toggle itself when we click on any of the item or in other words when the route changes. how can I achieve this in a functional component?

import "./style.css";
// import '../Navbar/style.css'
import {CgClose} from 'react-icons/cg'
import logo from '../../Images/logo.png'
import { Link } from 'react-router-dom'

const List=[
  {
      id: 1,
      ref: '/employers',
      text: 'Employers'
  },
  {
      id: 2,
      ref: '/candidates',
      text: 'Candidates'
  },
  {
      id: 3,
      ref: '/solution',
      text: 'Solution'
  },
  {
      id: 4,
      ref: '/pricing',
      text: 'Pricing'
  }
]

function Sidebar() {
  return (
    <div className=" container-fluid position-absolute top-0">
      <div className="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div className="offcanvas-header mt-2">
        <a href='/' className="Navbar__brand navbar-brand ms-4">
                <img src={logo} alt="Logo" width={140}/>
            </a>
          <CgClose className="btn-cross fs-2 text-reset" data-bs-dismiss="offcanvas" aria-label="Close" />
        </div>
        <div className="offcanvas-body">
        <div className="Navbar__right text-start">
            <ul className="Navbar__right__nav list-unstyled m-0">
               {List.map((item)=>(
                 <li className="Navbar__right__nav__item mx-4 d-flex align-items-center my-3" key={item.id}>
                    <Link to={item.ref} className="Navbar__right__nav__item__link Sidebar__link  text-decoration-none fs-6">
                        {item.text}
                    </Link>
                </li>
               ))}
            </ul>
            </div>
        </div>
        </div>
      </div>
  );
}

export default Sidebar;```