hunk.code_window:     const render = (props: OptionType) => {
         // for performance, the menu options in state aren't changed when the
         // focused option changes so we calculate additional props based on that
         const isFocused = focusedOption === props.data;
         props.innerProps.ref = isFocused ? this.onFocusedOptionRef : undefined;
         return (
           <Option {...commonProps} {...props} isFocused={isFocused}>
             {this.formatOptionLabel(props.data, 'menu')}
           </Option>
  
hunk.labels: keep keep keep keep replace keep keep keep keep keep
hunk.after_edit:       props.innerProps.innerRef = isFocused ? this.onFocusedOptionRef : undefined;
  
hunk.file_path: src/Select.js
hunk.type: replace
file: import React, { Component } from 'react';
  import Select, { components } from '../../src';
  import { colourOptions } from '../data';
  
  
  const ValueContainer = ({ children, ...props }) => (
    <components.ValueContainer {...props}>
      {children}
    </components.ValueContainer>
  );
  
  type State = {};
  
  export default class CustomControl extends Component<*, State> {
    state = {};
    render() {
      return (
        <Select
          defaultValue={colourOptions[0]}
          isClearable
          styles={{
            singleValue: (base) => ({ ...base, color: 'white' }),
            valueContainer: (base) => ({ ...base, background: colourOptions[2].color, color: 'white', width: '100%' }),
          }}
          components={{ ValueContainer }}
          isSearchable
          name="color"
          options={colourOptions}
        />
      );
    }
  }
  