Bootstrap 4 tablist - Switch tabs on click

Question

I am working on React JS.

I've implemented bootstrap 4 tablist on a page.

I also have a side menu which is another component. The menu has three <Link /> tags. I want to switch tabs when user clicks these links.

My tablist:

<div className="col-md-12">
            <ul className="nav nav-tabs responsive " role="tablist">
              <li className="nav-item">
                <a
                  className="nav-link active"
                  data-toggle="tab"
                  href="#home"
                  role="tab"
                >
                  Addresses
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link"
                  data-toggle="tab"
                  href="#profile"
                  role="tab"
                >
                  Contact Details
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link"
                  data-toggle="tab"
                  href="#messages"
                  role="tab"
                >
                  Relationships
                </a>
              </li>
            </ul>
          </div>

My menu:

<div className="bg-menu-collapse py-2 collapse-inner">
            <Link className="collapse-item" to="//home tab">
              Addresses
            </Link>
            <Link className="collapse-item" to="//profile tab">
              Contact Details
            </Link>
            <Link className="collapse-item" to="//messages tab">
              Relationships
            </Link>
          </div>

How can I achieve this?