Bootstrap 4 Tab to Accordion Hybrid Navigation

Question

I am having an issue with the following Bootstrap 4 code. The goal is to have a tabbed navigation on desktop and an accordion navigation on mobile devices that shares the same accordion content card. I have everything working except for the active state for the tabs. When I click each of the tabs on the desktop view the active state is not updated to reflect the current tab. The accordion headers are showing the active state as expected on the mobile view. I'm sure I am missing something simple, but I can't seem to figure it out how I need to structure the tabs.

<div class="container-fluid ">
    <div class="row">
      <div class="col">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs justify-content-around d-none d-md-flex" id="howItWorks-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="howItWorks-tab" data-toggle="collapse" data-target="#howItWorks" 
                type="button" role="tab" aria-controls="howItWorks" aria-selected="true">How It Works</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="products-tab" data-toggle="collapse" data-target="#products" 
                ype="button" role="tab" aria-controls="products" aria-selected="false">Patient Products</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="included-tab" data-toggle="collapse" data-target="#included" 
                type="button" role="tab" aria-controls="included" aria-selected="false">What's Included</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="faq-tab" data-toggle="collapse" data-target="#faq" 
                type="button" role="tab" aria-controls="faq" aria-selected="false">FAQ</button>
            </li>
        </ul>

        <div class="accordion" id="accordionExample">

          <!-- How It works -->
          <div class="card border-0">
            <div class="card-header d-md-none" id="howItWorks-accordion">
              <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" 
                data-target="#howItWorks" aria-expanded="true" aria-controls="howItWorks">
                  How it Works
                </button>
              </h2>
            </div>
        
            <div id="howItWorks" class="collapse show" aria-labelledby="howItWorks-accordion" data-parent="#accordionExample">
              <div class="card-body">
                How it Works - Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
              </div>
            </div>
          </div>

          <!-- Patient Products -->
          <div class="card border-0">
            <div class="card-header d-md-none" id="products-accorion">
              <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" 
                data-target="#products" aria-expanded="false" aria-controls="products">
                  Patient Products
                </button>
              </h2>
            </div>
            <div id="products" class="collapse" aria-labelledby="products-accorion" data-parent="#accordionExample">
              <div class="card-body">
                Patient Products - Some placeholder content for the second accordion panel. This panel is hidden by default.
              </div>
            </div>
          </div>
          
          <!-- What's Included -->
          <div class="card border-0">
            <div class="card-header d-md-none" id="included-accordion">
              <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" 
                data-target="#included" aria-expanded="false" aria-controls="included">
                  What's Included
                </button>
              </h2>
            </div>
            <div id="included" class="collapse" aria-labelledby="included-accordion" data-parent="#accordionExample">
              <div class="card-body">
                What's Included - And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
              </div>
            </div>
          </div>

          <!-- FAQs -->
          <div class="card border-0">
            <div class="card-header d-md-none" id="faq-accordion">
              <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" 
                data-target="#faq" aria-expanded="false" aria-controls="faq">
                    FAQs
                </button>
              </h2>
            </div>
            <div id="faq" class="collapse" aria-labelledby="faq-accordion" data-parent="#accordionExample">
              <div class="card-body">
                FAQs - Frequently Asked Questions
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>