Set selected class on navigation buttons/links on JavaScript/Flickity timeline carousel

I am using Flickity to build a history timeline carousel for my client's website. I have built a simplified demo on CodePen showing how it currently works and what needs adjustment.

CodePen demo

The demo was adapted from this CodePen

The areas that need adjusting are the buttons and having a is-selected class added when clicked or tapped by the user.

The following JS includes the code from the pen demo. The problematic code is commented out. If I enable the code, CodePen displays the following error TypeError: previousSelectedButton is null

For reference, the HTML template for the finished and working history timeline carousel will be:

<div class="carousel">
  <div class="carousel__timeline">
      <ul class="timeline__nav">
        <li class="timeline__item" data-year="1984" >
            <a href="#" id="1984" class="button button--year js-btn--year" data-group=".groupone"><span>1984 to 1988</span></a>
        </li>
        <li class="timeline__item" data-year="1989" >
            <a href="#" id="1989" class="button button--year js-btn--year" data-group=".grouptwo">1989 to 1992</a>
        </li>
        <li class="timeline__item" data-year="1993">
            <a href="#" id="1993" class="button button--year js-btn--year" data-group=".groupthree">1993 to 1999</a>
        </li>
        <li class="timeline__item" data-year="2000">
            <a href="#" id="2000" class="button button--year js-btn--year" data-group=".groupfour">2000 to 2002</a>
        </li>
        <li class="timeline__item" data-year="2003">
            <a href="#" id="2003" class="button button--year js-btn--year" data-group=".groupfive">2003 to 2005</a>
        </li>
        <li class="timeline__item" data-year="2006">
            <a href="#" id="2006" class="button button--year js-btn--year" data-group=".groupsix">2006 to 2012</a>
        </li>
        <li class="timeline__item" data-year="2013">
            <a href="#" id="2013" class="button button--year js-btn--year" data-group=".groupseven">2013 to 2020</a>
        </li>
      </ul>
  </div>
  <div class="carousel__content">
    {articles category="History" ordering="publish_up ASC" fixhtml="false"}
    <article class="carousel__cell [year-group]">
      [text]
              [year-group]
    </article>
    {/articles}
  </div>
  <div class="carousel__nav">
    <button class="button button--previous js-btn--previous">
        <svg width="18" height="18"><path d="M10.347 1.175L9.455.283a.96.96 0 0 0-1.362 0L.283 8.09a.96.96 0 0 0 0 1.362l7.81 7.81a.96.96 0 0 0 1.362 0l.892-.892a.965.965 0 0 0-.016-1.378L5.49 10.379h11.546c.534 0 .964-.43.964-.964V8.129a.962.962 0 0 0-.964-.964H5.49l4.84-4.612a.958.958 0 0 0 .017-1.378z" fill="#F7F7F7"/></svg>
    </button>
    <button class="button button--next js-btn--next">
        <svg width="18" height="18"><path d="M7.653 1.175l.892-.892a.96.96 0 0 1 1.362 0l7.81 7.806a.96.96 0 0 1 0 1.362l-7.81 7.81a.96.96 0 0 1-1.362 0l-.892-.892a.965.965 0 0 1 .016-1.378l4.841-4.612H.964A.962.962 0 0 1 0 9.415V8.129c0-.534.43-.964.964-.964H12.51L7.67 2.553a.958.958 0 0 1-.017-1.378z" fill="#F7F7F7"/></svg>
    </button>
  </div>
</div>

This code is working on the development site and exhibits the same errors when trying to apply a is-selected class to the navigation links.

JavaScript code

const utils = window.fizzyUIUtils;

const flkty = new Flickity(".carousel", {
  cellAlign: "left",
  contain: true,
  prevNextButtons: false,
  pageDots: false
});

const carouselButtonGroup = document.querySelector(".carousel__buttons");
const carouselButtons = utils.makeArray(carouselButtonGroup.children);

// update buttons on select
// flkty.on( 'select', function() {
//   const previousSelectedButton = carouselButtonGroup.querySelector('.is-selected');
//   const selectedButton = carouselButtonGroup.children[ flkty.selectedIndex ];
//   previousSelectedButton.classList.remove('is-selected');
//   selectedButton.classList.add('is-selected');
// });

carouselButtonGroup.addEventListener("click", function (event) {
  // Filter for button clicks
  if (!matchesSelector(event.target, ".button")) {
    return;
  }
  const selector = event.target.getAttribute("data-selector");
  // const index = carouselButtons.indexOf( event.target );
  // flkty.select( index );
  flkty.selectCell(selector);
});

from Set selected class on navigation buttons/links on JavaScript/Flickity timeline carousel