Как получить в innerText контент только одного узла?

let selectItem = document.querySelectorAll('.select__item');
     selectItem.forEach(item => {
     item.addEventListener('click', selectChoose);
   });

в item попадает

<div class="select__item" data-id="708" data-type="city">
<span class="city-name">Белогорск</span>
<span class="city-state">Амурская область</span>
</div>

как мне забрать в innerText содержимое только первого span, чтобы Белогорск только попадал?

function selectChoose() {
      let text = this.querySelector('.city-name').innerText,
      select = this.closest('.select'),
      currentText = select.querySelector('.select__current');
      console.log(text);
      currentText.innerText = text;
      select.classList.remove('is-active');

   }