I am using react-select/creatable library to display dropdowns with options. I wanted to make use of the formatCreateLabel prop which displays a label. This label is based on the topmost option in the dropdown, so essentially in the formatCreateLabel function, I am sorting my list which is dynamic, and based on the topmost option I am showing the create option. Few things to note here - the create option is dependent on the topmost option in the dropdown list. I also wanted to show the create option even if there is an exact match.

Snippet of the format function -

const formatCreateLabel = (input) => {
        
        const options = getSortedList(input, list); // using sort-matcher library for sorting
    
        const firstItem = _.first(options);
        const label = _.get(firstItem, 'label');

        if (!_.isNil(firstItem))
            return `Create wildcard "${label}"`;
    };

/** My list option looks something like this (eg.)
    const listOptions = [
         { label: 'alpha', key: 'a', value: 'a' },
         { label: 'alpea', key: 'ae', value: 'ae' },
         { label: 'beta', key: 'b', value: 'b' },
         { label: 'user.name', key: 'user.name', value: 'user.name' },
         { label: 'name', key: 'name', value: 'name' },
    ];
**/


   <CreatableSelect
      key={key}
      options={list}
      value={value}
      onChange={onChange}
      placeholder="Select..."
      formatCreateLabel={formatCreateLabel}
      {...props}
  />

The issue is the label is sometimes shown sometimes it is not although I can see that a valid value is being returned from the formatCreateLabel function. What could be the issue here? Also is there a way to continue showing the create new option even if there is an exact match?