react-select creatable defaultInputValue not working

I have created a CreatableSelect control and set the defaultInputValue property. Although the default value gets displayed on the control when control is loaded, after the first time I click on the control (either on the the textbox or the drop down symbol) the list does not display and on click again the default value is replaced by 'Select...' and then the list is displayed.

I would expect the default value not to be cleared when I click on the control unless I explicitly clear it. I would want the default value to remain until I make a selection in the dropdown or clear the value myself

import React, { Component } from 'react';


import CreatableSelect from 'react-select/creatable';

export default class CreatableSingle extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };
  handleInputChange = (inputValue: any, actionMeta: any) => {
    console.group('Input Changed');
    console.log(inputValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };
  render() {
    return (
      <CreatableSelect
        isClearable
        defaultInputValue ={'Yellow'}
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        options={ [
          { value: 'ocean', label: 'Ocean' },
          { value: 'blue', label: 'Blue' },
          { value: 'purple', label: 'Purple' },
          { value: 'red', label: 'Red' }]}
      />
    );
  }
}

The above code is from the https://react-select.com/home .. Have added below line since i would have a default value ( coming from database ) also the default value 'Yellow' is not part of the options array defaultInputValue ={'Yellow'}