react select search pointer

Question

I am impementing react-select with search and when I click on it - pointer for search is in the end of selected value. But I want it to be at the start of this search field.

And when I press backspace - it doesnt delete selected value. Only when I start typing - value dissapears.

  const SingleValue = ({ ...props }) => {
    return <div>{props.data.value}</div>;
  };

  const formatOptionLabel = ({ value, email }: SelectOptionType) => (
    <div className={styles.option}>
      <p className={styles.value}>
        {value} - {email}
      </p>
    </div>
  );

  return (
    <div>
      <label className={styles.selectLabel}>{label}</label>
      <Select
        className={styles.select}
        components={{ DropdownIndicator, SingleValue, NoOptionsMessage }}
        defaultValue={selectedOption || selectedValue}
        formatOptionLabel={formatOptionLabel}
        onChange={handleChange}
        options={options}
        styles={customStyles}
        isSearchable={true}
        placeholder=""
      />
    </div>
  );
};