Input clears on select, how to prevent

[SHAGGYER]

Heylo, I am making an autocomplete component and I guess by default it clears the input when item is selected; nothing in my code does this explicitly. I want the search query to always be displayed, how do i do that.

interface SemanticAutocompleteItem {
  items: { value: string; label: string }[];
  onItemSelect: (item: { value: string; label: string }) => void;
}
const SemanticAutocomplete = ({
  items,
  onItemSelect,
}: SemanticAutocompleteItem) => {
  const { exerciseEmbeddings: embeddings } = useContext(AppContext);
  const [query, setQuery] = useState("");
  const [results, setResults] = useState(items || []);
  const [selectedValue, setSelectedValue] = useState(null);

  const embeddingsPipeline = useRef<any>();

  

  function dotProduct(a: number[], b: number[]) {
    if (a.length !== b.length) {
      throw new Error("Both arguments must have the same length");
    }

    let result = 0;

    for (let i = 0; i < a.length; i++) {
      result += a[i] * b[i];
    }

    return result;
  }

  // Perform semantic search on input change
  useEffect(() => {
    const fetchResults = async () => {
      const topResults = [...] // i cut out the logic for sake of shortness of my question

      setResults(topResults);
    };

    fetchResults();
  }, [query]);

  const handleChange = (selected) => {
    if (selected) {
      setSelectedValue(selected);
      onItemSelect(selected as any);
    } else {
      setSelectedValue(null);
 
    }
  };

  return (
    <Select
      isClearable
      inputValue={selectedValue ? selectedValue.label : query}
      styles={{
        menuList: (styles) => ({
          ...styles,
          backgroundColor: "#1a1a1a",
        }),
        container: (styles) => ({
          ...styles,
          width: "100%",
          border: "none",
        }),

        singleValue: (styles) => ({
          ...styles,
          color: "white",
        }),
        control: (styles) => ({
          ...styles,
          width: "100%",
          padding: "0.5rem",
          color: "white",
          backgroundColor: "#594d7a",
          border: "none",
          outline: "none",
        }),

        input: (base, state) => ({
          ...base,
          color: "white",
        }),
        valueContainer: (styles) => ({
          ...styles,
          padding: "0",
          backgroundColor: "transparent",
          color: "white",
        }),
      }}
      classNames={{
        placeholder: () => "!text-gray-300",
        option: ({ isFocused, isSelected }) =>
          cn("!text-gray-200 !cursor-pointer", isFocused && "!bg-slate-800"),
      }}
      options={results}
      onInputChange={(text, action) => {
        if (action.action === "input-change") setQuery(text);
      }}
      onChange={handleChange}
      placeholder="Search exercises..."
    />
  );
};

export default SemanticAutocomplete;

[manjushsh]

@SHAGGYER Can you please a share a working code sandbox link?