Показывать всплывающую подсказку только тогда, когда в раскрывающемся списке есть большой текст, используя react-select и react-tooltip

Question

Мне нужно показывать всплывающую подсказку только тогда, когда в раскрывающемся списке есть действительно длинный текст. На простом javascript это просто, так как я могу сделать код, как в скрипте ниже

function isEllipsisActive(element) {
  return element.offsetWidth < element.scrollWidth;
}

Array.from(document.querySelectorAll('.ellipsis'))
  .forEach(element => {
    if (isEllipsisActive(element)) {
      element.title = element.innerText;
    }
  });

body {
  margin: 0;
  padding: 5px 10px;
  background: #ccc;
  font-family: Arial, sans-serif;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.name {
  display: block;
  width: 150px;
  margin: 10px 40px;
  padding: 5px 10px;
  background: white;
  box-shadow: 0px 0px 3px black;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

No title attribute:
<div class="name ellipsis">
  Maëlle Oanez
</div>
The title atrtibute is automatically added:
<div class="name ellipsis">
  Verônica Jathbiyya
</div>

Я могу показать всплывающую подсказку в своем приложении, но в ответ я не могу получить значение стилей и установить его в соответствии с длина варианта. Пожалуйста, помогите.

Вот мой пример кода