React Select Async places the cursor(caret) at the start of the placeholder when input is focused

[jees47]

I am using React Async Select and I found out that by default it places the cursor(caret) at the start of the placeholder when the input is focused. How can I place the cursor at the end? I did not find any prop that I can pass to select component to achieve that behavior. Here's my AsyncSelect:

     `<AsyncSelect
        styles={selectStyle}
        openDropdown={openDropdown}
        setOpenDropdown={setOpenDropdown}
        emoji={emoji}
        loadOptions={suggestions}
        placeholder="City, Place, Art, Architecture, Park, Collection..."
        onChange={handleSearch}
        components  ={{ Control }}
      />`