如何在react-select中更改所有元素(边框、文本和箭头)的悬停？

import React from 'react';
import Select from 'react-select';

const customStyles = {
  control: (provided, state) => ({
    ...provided,
    border: state.isFocused ? '2px solid blue' : '2px solid gray',
    boxShadow: state.isFocused ? '0 0 0 1px blue' : 'none',
    '&:hover': {
      border: '2px solid blue',
    },
  }),
  option: (provided, state) => ({
    ...provided,
    color: state.isFocused ? 'white' : 'black',
    background: state.isFocused ? 'blue' : 'white',
    '&:hover': {
      background: 'blue',
    },
  }),
  singleValue: (provided, state) => ({
    ...provided,
    color: state.isFocused ? 'white' : 'black',
  }),
  indicatorSeparator: (provided, state) => ({
    ...provided,
    background: state.isFocused ? 'blue' : 'gray',
  }),
};

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'orange', label: 'Orange' },
];

const App = () => {
  return (
    <Select
      options={options}
      styles={customStyles}
    />
  );
};

export default App;