react-select border color on select box

Question

I am currently trying to style the border color of a select box using react-select which I have managed to do but for some reason when I activate the select box and hover over the options given the styling of the select box border color is defaulting back to blue. I cannot seem to find where in the DOM I need to be targeting to change this. Here is the issue:

When I hover, the correct (orange) border color is shown:

But then when I hover over the options, the default blue color is then shown around select box. I want this to remain orange:

Here is my implementation of the select box.

const customStyles = {
  control: (provided: Record<string, unknown>) => ({
    ...provided,
    height: 52,
    '&:hover': {
      border: '1px solid #ff8b67',
      boxShadow: '0px 0px 6px #ff8b67',
    },
    '&:focus': {
      border: '1px solid #ff8b67',
      boxShadow: '0px 0px 6px #ff8b67',
    },
  }),
};
export default function CustomControl(): JSX.Element {
  // TODO: select defaultValue by user locale preference possibly
  return (
    <Select
      className="cult-select-box"
      styles={customStyles}
      defaultValue={countriesJSON[0]}
      formatOptionLabel={formatOptionLabel}
      options={countriesJSON}
    />
  );

Can anyone see why this is happening?

Answer 1

You must import StyleConfig from react-select and add react-states props as a parameter to the control function. Finally, use isFocused in state. So, customStyles should look like:

 const customStyles: StylesConfig = {
 control: (provided: Record<string, unknown>, state: any) => ({
    ...provided,
    height: 52,
    border: state.isFocused ? "1px solid #ff8b67" : "1px solid #cccccc",
    boxShadow: state.isFocused ? "0px 0px 6px #ff8b67" : "none",
    "&:hover": {
      border: "1px solid #ff8b67",
      boxShadow: "0px 0px 6px #ff8b67"
    }
  })
};