Bootstrap-Wizard | class="active" added to wrong element

Question

I use Bootstrap 4.5.0 and am trying to use this Bootstrap form-wizard (version 1.4.2).

To navigate through the different tabs, the JS should add a class="active" attribute to the current step's <li>-element. Instead - for some reason that I haven't been able to figure out - it adds the attribute to the <li>-element's child element <a>. This results in the nav-pills not being styled right and the previous/next buttons not working properly. I manually added/removed the required attributes using Chrome browser's developer tools and confirmed that apparently, everything would work out fine, if the class="active" attribute got attached to the <li>-element.

Any ideas why the class is added to the wrong element and how to prevent it?

Here's my HTML mark-up:

<div id="rootWizard">
    <div class="form-bootstrapWizard">
        <ul class="bootstrapWizard form-wizard">
            <li data-target="#step1" class="active">
                <a href="#tab1" data-toggle="tab"> 
                    <span class="step">1</span>
                    <span class="title">Title of Step 1</span>
                </a>
            </li>
            <li data-target="#step2">
                <a href="#tab2" data-toggle="tab"> 
                    <span class="step">2</span>
                    <span class="title">Title of Step 2</span>
                </a>
            </li>
            <li data-target="#step3">
                <a href="#tab3" data-toggle="tab">
                    <span class="step">3</span> 
                    <span class="title">Title of Step 3</span> 
                </a>
            </li>
            <li data-target="#step4">
                <a href="#tab4" data-toggle="tab"> 
                    <span class="step">4</span> 
                    <span class="title">Title of Step 4</span> 
                </a>
            </li> 
            <li data-target="#step5">
                <a href="#tab5" data-toggle="tab"> 
                    <span class="step">5</span> 
                    <span class="title">Title of Step 5</span> 
                </a> 
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>

This is how I initialize the wizard within the document.ready()-function:

$('#rootWizard').bootstrapWizard({
    tabClass: 'bootstrapWizard'

});