How to display corresponding elements of the active data- category?

Question

I have two filters , "Bidder" and "Seller". "Bidder" is the active filter.

It is working fine when I clicked on the filters, it is showing their corresponding elements.

The only problem is when the page loads, it is displaying the elements of both the "Bidder" and "Seller" filter. However, I want it to display the corresponding elements of my active filter only when the page loads.

I have tried to use display: none; to hide it but it does not work.

let indicator = document.querySelector('.indicator').children;
let main = document.querySelector('.info').children;

for (let i = 0; i < indicator.length; i++) {
  indicator[i].onclick = function() {
    for (let x = 0; x < indicator.length; x++) {
      indicator[x].classList.remove('active');
    }
    this.classList.add('active');
    const displayItems = this.getAttribute('data-filter');
    for (let z = 0; z < main.length; z++) {
      main[z].style.transform = 'scale(0)';
      setTimeout(() => {
        main[z].style.display = 'none';
      }, 0);

      if ((main[z].getAttribute('data-category') == displayItems)) {
        main[z].style.transform = 'scale(1)';
        setTimeout(() => {
          main[z].style.display = 'block';
        }, 0);
      }
    }
  }
}

<ul class="indicator">
  <li data-filter="bidder" class="active">Bidder</a>
  </li>
  <li data-filter="seller">Seller</a>
  </li>
</ul>

<ul class=" info">
  <li data-category="bidder"><a>abc</a></li>
  <li data-category="seller"><a>efg</a></li>
</ul>