select onSearchChange

[jaallaall]

Hello and courtesy The problem is in the search part When I search, I'm prompted based on what I'm searching for But when I choose an option, I don't want to be prompted If you check the code I typed, you will understand When I select an option, I want the return value to be empty And set only when searching How do I fix this problem? Please guide and help

import { useInfiniteCompanyDropDown } from "@/services";
import {
  ComboboxItem,
  Grid,
  Group,
  Loader,
  Select,
  SelectProps,
  Text,
} from "@mantine/core";
import { useDebouncedValue, useIntersection } from "@mantine/hooks";
import { useEffect, useState } from "react";
import { useFormContext } from "./form-context";

export default function Form2() {
  const form = useFormContext();

  const { ref, entry } = useIntersection({
    root: document.querySelector(`#select-test`),
    threshold: 0.95,
  });

  const [searchValue, setSearchValue] = useState("");
  const [debounced] = useDebouncedValue(searchValue, 500);

  const {
    data: dataCompany,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteCompanyDropDown({
    SearchText: debounced,
  });

  useEffect(() => {
    if (entry?.isIntersecting && hasNextPage) {
      fetchNextPage();
    }
  }, [entry, fetchNextPage, hasNextPage]);

  const newOptions = dataCompany?.pages
    .map((page) => page)
    .map((item) =>
      item?.Response?.Value.Items.map((option: any) => {
        return {
          value: option.ID.toString(),
          label: option.Name,
        };
      })
    )
    .flat() as ComboboxItem[];

  const handleChange = (val: string | null) => {
    form.setFieldValue("companyCode", val as string);
  };

  const handleSearchChange = (val: string) => {
    setSearchValue(val);
  };

  const renderSelectOption: SelectProps["renderOption"] = ({
    option,
    checked,
  }) => {
    return (
      <Group
        gap="sm"
        ref={
          newOptions[newOptions?.length - 1].value === option.value
            ? ref
            : undefined
        }
      >
        {checked && <Text component="i" className="icon-Check" />}
        <Text size="sm">{option.label}</Text>
      </Group>
    );
  };

  return (
    <Grid>
      <Grid.Col span={{ base: 12, md: 6 }}>
        <Select
          data={newOptions}
          value={form.getValues().companyCode}
          clearable
          searchable
          searchValue={searchValue}
          onSearchChange={handleSearchChange}
          rightSection={isFetchingNextPage ? <Loader size={18} /> : undefined}
          renderOption={renderSelectOption}
          scrollAreaProps={{ id: "select-test" }}
          key={form.key("companyCode")}
          {...form.getInputProps("companyCode")}
          onChange={handleChange}
        />
      </Grid.Col>
    </Grid>
  );
}