change color arrow icon react-select - reactjs

Question

hi how to change color of arrow icon in react-select
in mouse over in google chrome, I find CSS variable but I cant change color.
this value of CSS css-tlfecz-indicatorContainer.
in my customStyles I wrote this line but not working:
indicatorContainer:base =>({
...base,
color:'#000000'
}),
UPDATE
this is my component I use react-select
import React from 'react';
import Select from 'react-select';
export default function DropDown(props) {
const customStyles = {
control: (base, state) => ({
...base,
background: "#59c5b8",
borderRadius: 0,
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 20,
// kill the gap
marginTop: 0,
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
}),
indicatorSeparator: base => ({
...base,
display: 'none'
}),
myDropDown__indicator: base => ({
...base,
'&.myDropDown__dropdown-indicator': {
'&.indicatorContainer': {
color: '#000000'
}
}
}),
'&.indicatorContainer': {
color: '#000000'
}
};
const [selectedOption, setSelectedOption] = React.useState(0);
const handleChange = selectedOption => {
setSelectedOption(selectedOption)
props.parentCallBack(selectedOption)
};
return (
<Select
isSearchable={false}
styles={customStyles}
isOptionDisabled={true}
defaultValue={props.options[0]}
isRtl={true}
onChange={handleChange}
options={props.options}
classNamePrefix='myDropDown'
/>
);
}

Answer 1

Just use customStyles and declare a new colour for dropdownIndicator element:
const customStyles = {
dropdownIndicator: base => ({
...base,
color: "red" // Custom colour
})
};
Here you can find the list of all the elements and here a live example.

Answer 2

Here is how I did it in version 4.3.1
const style = {
dropdownIndicator: (provided) => ({
...provided,
"svg": {
fill: "red"
}
}),
}
return (
<Select options={renderOptions()} styles={style} />
);

Answer 3

This should help:
import React from 'react';
import Select from 'react-select';
export default function DropDown(props) {
const customStyles = {
indicatorsContainer: () => ({
'.myDropDown': {
'&__dropdown-indicator': {
color: 'red' // <--- Color of your choice
}
}
})
};
return (
<Select
styles={customStyles}
classNamePrefix='myDropDown'
/>
);
}
PS Removed non-related code for better understanding. :)