Why "Create" option isn't visible in AsyncCreatableSelect in React-Select

Question

I was working on implementing AsyncCreatableSelect and everything was working properly but somehow I noticed a blank record was appearing in all populated lists, and after debugging I noticed it's not a blank list, it's an invisible "Create " option which we get at bottom of the Dropdown list.

Expected Behaviour (Creat option should be visible) check the below example.

I am sharing my component and Parent component.

Child Component

import makeAnimated from "react-select/animated"; 
import AsyncCreatableSelect from 'react-select/async-creatable';

const AsyncCreatableSelectBar = ({ setValue, loadOptions, placeholder, onInputChange, isLoading }) => {
  const animatedComponents = makeAnimated();
  return (
    <>
      <AsyncCreatableSelect
        cacheOptions
        isMulti
        components={ animatedComponents }
        getOptionLabel={(e) => e.name }
        getOptionValue={(e) => e.name } 
        loadOptions={ loadOptions ? loadOptions : () => null } 
        placeholder={ placeholder }
        onInputChange = { onInputChange }
        isLoading = { isLoading } 
        onChange={(value) => setValue(value)}  
      />
    </>
  );
};

export default AsyncCreatableSelectBar;

Parent Component (Where I am implementing this)

function fn() {
    const [state, setState] = useState({
        AsyncSearchValue: [],
        AsyncSearchQuery: ""
    });

    const [getUniversities, { loading, client, data }] = useMutation(getUniversitiesMutation);

    const loadOptions = async (val) => {
        return getUniversities({
            variables: {
                "query": val
            }
        }).then((res) => res.data.getUniversities.data)
    };
    return ( 
      <div>
        <AsyncCreatableSelectBar setValue = {
            (val) => setState({
                ...state,
                AsyncSearchValue: val
            })
        }
        loadOptions = {
            debounce(loadOptions, 1000)
        }
        placeholder = "Start typing your skills...."
        onInputChange = {
            (value) => setState({
                ...state,
                AsyncSearchQuery: value
            })
        }
        className = "col-12" />
        </div>
    }
    export default fn;

Answer 1

I found this solution:

import React from "react";
import AsyncCreatableSelect from "react-select/async-creatable";

const TestComponent = ({ name, ...props }) => {
    const promiseOptions = async (inputValue) => {
      return fetch("companies.json", {
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json"
          }
        })
      .then((resp) => resp.json())
      .then((data) => {
        // console.log(data.companies);
          return data.companies.map((item) => ({
            value: item.name,
            label: item.name,
            address: item.address
          }));
        });
  };

  return (
      <div>
          <AsyncCreatableSelect
            {...props}
            name={name}
            isClearable
            cacheOptions
            defaultOptions
            loadOptions={promiseOptions}
            onChange={(opt, action) => {
              if (opt) {
                props.setFieldValue("company.name", opt.value);
                props.setFieldValue("company.address", opt.address);
              }
              // console.log(action);
              if (action.action === "clear") {
                props.setFieldValue(name, "");
              }
            }}
          />
      </div>
  );
  // }

   return <Field name={name} component={SelectField} />;
};

export default TestComponent;

in: sandbox https://github.com/JedWatson/react-select/issues/4321