hunk.code_window:                           "cacheOptions": false,
                             "captureMenuScroll": false,
                             "closeMenuOnSelect": true,
                             "components": Object {},
                             "controlShouldRenderValue": true,
                             "createOptionLabelFirst": false,
                             "defaultInputValue": "",
                             "defaultMenuIsOpen": false,
                             "defaultOptions": false,
                             "defaultValue": null,
                             "escapeClearsValue": false,
  
hunk.labels: keep keep keep keep keep replace keep keep keep keep keep
hunk.after_edit:                           "createOptionPosition": "last",
  
hunk.file_path: src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
hunk.type: replace
file: import React from 'react';
  
  import Select, { components } from '../../src';
  import { colourOptions, groupedOptions } from '../data';
  
  const menuHeaderStyle = {
    padding: '8px 12px',
    background: colourOptions[2].color,
    color: 'white',
  };
  
  const MenuList = (props) => {
    return (
      <components.MenuList {...props}>
        <div style={menuHeaderStyle}>
          Custom Menu List
        </div>
        {props.children}
      </components.MenuList>
    );
  };
  
  export default () => (
    <Select
      defaultValue={colourOptions[1]}
      options={groupedOptions}
      components={{ MenuList }}
    />
  );
  