Creatable Select only works with the default option type

Hey!

I was trying to use the CreatableSelect component with a list of options that do not match the default schema (the default looks something like this: {value:"", label:""}) and apparently when I add the prop getOptionLabel to tell the select component which parameter it should display in the options it breaks the label in the create option.

type OptionType = { color: string };

const options: OptionType[] = [
  { color: "red" },
  { color: "green" },
  { color: "blue" },
  { color: "yellow" }
];

export default function App() {
  return (
    <div>
      <CreatableSelect<OptionType, false, GroupBase<OptionType>>
        options={options}
        isSearchable={false}
        isValidNewOption={() => true}
        getOptionLabel={(o) => o.color}
        formatCreateLabel={() => "Add new"}
      />
    </div>
  );
}

The above code is also in this sandbox: https://codesandbox.io/s/createable-select-bug-3g45xt.

In this case I have a non searchable select component that lists a bunch of colors ({color:"") and i only want to trigger an api request when the "create" option is clicked. Whenever I have the getOptionLabel set to something other than "label" the create option has no label but it does render empty. If I had a label property to the colors options array it all works fine even when adding the getOptionLabel={(o) => o.label} prop.

Start with the CreatableSelect reproduction in the linked CodeSandbox and trace how getOptionLabel and formatCreateLabel are handled for a custom option shape. Confirm the empty create-option label with options containing only color, then verify that the create option displays correctly when a custom getOptionLabel is used.