create guided tooltip for web having drop down with some functionalities

Question

i have a dependent drop down list in my html as follows:

            <!-- Dropdown for Provinces -->
            <div >
                <p >İl Bazında Seçim</p>

                <!-- Dropdown for Provinces -->
                <select id="ilsec" onchange="Load_Province_Boundary();closePopup1();">
                    <option value="">İl Seçiniz</option>
                </select>

                <!-- Dropdown for koy -->
                <select id="koysec" onchange="Load_koy_Boundary();">
                    <option value="">koy Seçiniz</option>
                </select>
            </div>
                

as seen, i have some on change functions as "Load_Province_Boundary();closePopup1(); for #ilsec id etc.

i want to use introJS to add a guided tour for user in first load of page. but in this tour i want to apply some predefined selections for items in drop down lists to see as well the aformentioned functionalities.

but when i use the defult coding the drop down options could not be selected they are disactivated fully untile i close the tutorial tour.

i use the folwing for guided tour:

function startIntro() {
  var intro = introJs();
  intro.setOptions({
    steps: [
      {
        intro: "ABCD....",
        position: 'top',
      },
      {
        element: document.querySelector('#ilsec'),
        intro: "ABCD",
      },
      {
        element: document.querySelector('#koysec'),
        intro: "ABCDE..."
      }
    ]
  });
  intro.start();
}

document.addEventListener('DOMContentLoaded', function() {
  startIntro();
});

can any one help to solve that or understand what cause this ?

so thanks in advance