Change element text inside dropdown Semantic UI - css

Question

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