react-select dropdown not showing cursor - reactjs

Question

I have a react-select Select component that renders a searchable dropdown menu.
Here is a Sandbox: https://codesandbox.io/s/lingering-paper-eb4lr?fontsize=14&hidenavigation=1&theme=dark
For some reason, I can't seem to get the cursor to display. The search functionality works fine. I can type in the field but the cursor does not display at all. When looking at the example snippets on the website, the cursor shows appropriately.
In my code, I have a blue dropdown background with white text. I also made the cursor white in the styles object.
<Select
value={currentValue}
placeholder="N/A"
components={{ IndicatorSeparator: () => null }}
onChange={(val: any) => { // do stuff }}
isSearchable={true}
autoBlur={true}
openMenuOnFocus={true}
options={options}
styles={getStyles()}
/>
getStyles():
{
control: (provided: any, state: any) => ({
...provided,
color: 'white',
backgroundColor: 'blue',
fontSize: '1rem',
width: '250px',
borderRadius: '0px',
borderStyle: 'none',
padding: '0 0.5rem 0 0.5rem',
cursor: 'text',
}),
option: (provided: any, state: any) => ({
...provided,
fontWeight: '400',
color: 'black',
backgroundColor: 'white',
fontSize: '1rem',
padding: '0.25rem 0.5rem 0.25rem 0.5rem',
cursor: 'pointer',
'&:hover': { backgroundColor: '#F5F5F5' },
}),
menu: (provided: any, state: any) => ({
...provided,
fontWeight: '400',
color: MEDICAL_BLUE,
backgroundColor: 'white',
fontSize: '1rem',
padding: '0.25rem 0.5rem 0.25rem 0.5rem',
borderRadius: '0px',
borderStyle: 'none',
}),
singleValue: (provided: any, state: any) => ({
...provided,
color: 'white',
backgroundColor: MEDICAL_BLUE,
fontSize: '1rem',
}),
input: (provided: any, state: any) => {
return {
...provided,
color: 'white',
};
},
placeholder: (provided: any, state: any) => {
return {
...provided,
color: 'white',
};
},
dropdownIndicator: (provided: any, state: any) => {
return {
...provided,
color: 'white',
'&:hover': { color: '#F5F5F5' },
};
},
};
Any help is greatly appreciated.
Edit: Here is a Sandbox showing the behavior I'm seeing. As you can see, without anything selected, I can see the cursor when clicking in the dropdown. However, once I select a value, clicking on the menu again shows no cursor.

Answer 1

It looks like the main issue is because of the background color of the value selected on the dropdown. In fact, if you give it transparent as value, it works. It's probably covering the cursor. Primarily addressing the OP that you can still retain the background color of blue for your dropdown but just remove the background color of the value selected
singleValue: (provided: any, state: any) => ({
...provided,
color: "white",
// backgroundColor: "#004080", // comment this out
fontSize: "1rem"
}),

Answer 2

I was able to figure out my own issue, so I'm writing this to help out future souls.
Turns out that the singleValue style key styles the selected value for the dropdown input which removes any cursor. I haven't discovered any way to workaround it but removing the singleValue style key and re-styling my dropdown to have a white background instead of a dark blue background worked for me.