Change element text inside dropdown Semantic UI

I'm using dropdown from react.semantic.ui and also custom some css attribute inside the dropdown,

<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}
  />

but there is a div element inside the dropdown with class name 'text' that i could not change. It look like this from element inspect https://i.stack.imgur.com/f2sQv.png

i have try to change it directly using solution from this link here but it still not make any changes, this is one of my solution i have try inside my css code

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

and also this one :

.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;
  }

}