Как получить значение из поле?

const selectSingle = document.querySelector('.__select');
const selectSingle_title = selectSingle.querySelector('.__select__title');
const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');

// - Toggle menu
selectSingle_title.addEventListener('click', () => {
  if ('active' === selectSingle.getAttribute('data-state')) {
    selectSingle.setAttribute('data-state', '');
  } else {
    selectSingle.setAttribute('data-state', 'active');
  }
});

// - Close when click to option
for (let i = 0; i < selectSingle_labels.length; i++) {
  selectSingle_labels[i].addEventListener('click', (evt) => {
    selectSingle_title.textContent = evt.target.textContent;
    selectSingle.setAttribute('data-state', '');
  });
}

console.log();

.__select {
  position: relative;
  width: 230px;
  height: 40px;
  margin: 0 auto;
}

.__select[data-state="active"] .__select__title::before {
  transform: translate(-3px, -50%) rotate(-45deg);
}

.__select[data-state="active"] .__select__title::after {
  transform: translate(3px, -50%) rotate(45deg);
}

.__select[data-state="active"] .__select__content {
  opacity: 1;
}

.__select[data-state="active"] .__select__label+.__select__input+.__select__label {
  max-height: 40px;
  border-top-width: 1px;
}

.__select__title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  border-radius: 5px;
  border: solid 1px #c7ccd1;
  cursor: pointer;
}

.__select__title::before,
.__select__title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  width: 10px;
  height: 2px;
  transition: all 0.3s ease-out;
  background-color: #333333;
  transform: translate(-3px, -50%) rotate(45deg);
}

.__select__title::after {
  transform: translate(3px, -50%) rotate(-45deg);
}

.__select__title:hover {
  border-color: #d8093a;
}

.__select__title:hover::before,
.__select__title:hover::after {
  background-color: #d8093a;
}

.__select__content {
  position: absolute;
  top: 40px;
  left: 3px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 6px);
  background-color: #ffffff;
  border: 1px solid #c7ccd1;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: all 0.3s ease-out;
  opacity: 0;
  z-index: 8;
}

.__select__input {
  display: none;
}

.__select__input:checked+label {
  background-color: #dedede;
}

.__select__input:disabled+label {
  opacity: 0.6;
  pointer-events: none;
}

.__select__label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  max-height: 0;
  padding: 0 16px;
  transition: all 0.2s ease-out;
  cursor: pointer;
  overflow: hidden;
}

.__select__label+input+.__select__label {
  border-top: 0 solid #c7ccd160;
}

.__select__label:hover {
  background-color: #d8093a !important;
  color: #ffffff;
}

<div class="__select" data-state="">
  <div class="__select__title" data-default="Option 0">UA</div>
  <div class="__select__content">
    <input id="singleSelect0" class="__select__input" type="radio" name="singleSelect" checked />
    <label for="singleSelect0" class="__select__label">UA</label>
    <input id="singleSelect1" class="__select__input" type="radio" name="singleSelect" />
    <label for="singleSelect1" class="__select__label">UA</label>
    <input id="singleSelect2" class="__select__input" type="radio" name="singleSelect" />
    <label for="singleSelect2" class="__select__label">RU</label>
    <input id="singleSelect3" class="__select__input" type="radio" name="singleSelect" />
    <label for="singleSelect3" class="__select__label">EN</label>
  </div>
</div>