I am trying to create a select element with react-select and I use the Creatable component for that.

With my current implementation, it won't prompt the user for "create" option on typing, as shown on the documentation
It will show instead the default "No options".

I am also using redux-form library but I don't think that the problem comes from there.

Here is my code so far :

import Select from "react-select/creatable";

import React from "react";



const customFilter = (option, searchText) => {

  return option.data.searchfield.toLowerCase().includes(searchText.toLowerCase());

};



export default (props) => {

  const { input, options, placeholder } = props;



  const renderValue = (value) => {

    const val =

      value === "" ? null : options.find((obj) => obj.value === input.value);

    return val || "";

  };



  return (

    <Select

      value={renderValue(input.value)}

      name={input.name}

      onFocus={() => input.onFocus(input.value)}

      onChange={(value) => input.onChange(value.value)}

      onBlur={() => input.onBlur(input.value)}

      options={options}

      isRtl={true}

      placeholder={placeholder}

      filterOption={customFilter}

    />

  );

};

EDIT :

I also tried from the docs to import the makeCreatableSelect but it did not help:

    import Creatable, { makeCreatableSelect } from 'react-select/creatable';

<Creatable 

  //here goes props

/>