Ссылки не изменились после сортировки по алфавиту

У меня есть список, отсортированный по алфавиту, но ссылки из каждого li не меняются, если я проверяю ссылки элементов после сортировки. Не могу понять, что мне не хватает.

Любая помощь с объяснениями будет принята с благодарностью.

Мой код в HTML:

<ul class = "row list-unstyled" id = "testingList">
  <li class = "col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class = "top-box__content" href = "https://www.example.com/info/1" target = "_blank">
      <div class = "row no-gutters">
        <div class = "col">
          <h3 class = "top-box__title">Pink</h3>
        </div>
      </div>
    </a>
  </li>
  <li class = "col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class = "top-box__content" href = "https://www.example.com/info/2" target = "_blank">
      <div class = "row no-gutters">
        <div class = "col">
          <h3 class = "top-box__title">White</h3>
        </div>
      </div>
    </a>
  </li>
  <li class = "col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class = "top-box__content" href = "https://www.example.com/info/3" target = "_blank">
      <div class = "row no-gutters">
        <div class = "col">
          <h3 class = "top-box__title">Brown</h3>
        </div>
      </div>
    </a>
  </li>
</ul>

Мой JS-код:

let pickList = document.querySelector("#testingList");

let li = pickList.querySelectorAll("a");

resultList = [];

for (let i = 0; i < li.length; i++) {
  resultList.push(li[i].innerHTML);
  console.info(resultList);
}

resultList.sort();

for (let j = 0; j < li.length; j++) {
  li[j].innerHTML = resultList[j];
}