Изменить текст элемента в раскрывающемся семантическом интерфейсе пользователя

Я использую раскрывающийся список из response.semantic.ui, а также настраиваю атрибут css внутри раскрывающегося списка,

<Dropdown
    scrolling
    className={styles.filterDropdown}
    placeholder="Select Area, Branch or Region"
    fluid
    search
    selection
    closeOnChange
    onChange={handleChange}
    searchInput={<Input transparent className={styles.inputSearch}></Input>}
    options={[ALL_OPTION].concat(areaList({ areas, headOffice }))}
    value={codeValueRating}
  />

но в раскрывающемся списке есть элемент div с именем класса text, который я не мог изменить. Это выглядит так из element inspect https://i.stack.imgur.com/f2sQv.png

я должен попытаться изменить его напрямую, используя решение из этой ссылки здесь, но он по-прежнему не вносит никаких изменений. Это одно из моих решений, которые я пытаюсь использовать в своем коде css

.ui.selection.visible.dropdown>.text:not(.default) { color: #475fe8 !important; }

а также этот:

.filterDropdown {
  flex: 1.8;
  cursor: pointer;
  word-wrap: break-word;
  line-height: 1em;
  white-space: normal;
  min-height: 2.71428571em;
  background: #2C3245 !important;
  padding: .78571429em 1em .78571429em 1em;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
  border-radius: .28571429rem;
  min-width: 15rem !important;

  div.text {
    color: #475fe8;
  }

}