React select option update giving [object Promise]

I am using React Select in my code and trying to update options on the basis of Input but however I am facing issue as [object Promise] as value in Input even after touching the Select Box Below is my code.

<tbody>
  {filteredResults && filteredResults.length > 0 ? (
    filteredResults.map((data) => (
      <React.Fragment key={data.id}>
        <tr>
          <td>{data.name}</td>
          <td>
            <form
              onSubmit={(e) => handleSubmit(e, data)}
              style={{ display: "flex", alignItems: "center" }}
            >
              <input
                type="text"
                className="form-control"
                value={data.alias}
                name="alias"
                onChange={(e) => handleAliasChange(data.id, e.target.value)}
              />
              <input type="hidden" name="name" value={data.name} />
              <input type="hidden" name="key" value={data.key} />
              &nbsp;
              {/* Country select field */}
              <Select
                options={countryOptions}
                name="player_country"
                onChange={(selectedOption) =>
                  handleCountryChange(selectedOption, data.id)
                }
                placeholder="Select Country"
              />
              &nbsp;
              {/* Entity Name field (shown after country is selected) */}
              {data?.showEntityField && (
                <>
                  {console.log(data?.entityResults)}
                  <Select
                    name="entity_key"
                    options={data?.entityResults ?? []} // It will show the search results
                    onInputChange={(query) => handleSearch(query, data.id)} // Search when user types
                    placeholder="Search Entity Name"
                    // value={data?.searchQuery ?? ""} // Show typed query as value
                    // onChange={(selectedOption) => handleEntityChange(selectedOption, data.id)} // Handle when an option is selected
                    noOptionsMessage={() => "No options available"}
                  />
                </>
              )}
              &nbsp;
              <button type="submit" className="btn btn-primary mt-2">
                Submit
              </button>
            </form>
          </td>
        </tr>
      </React.Fragment>
    ))
  ) : (
    <tr>
      <td colSpan="3">No result to display</td>
    </tr>
  )}
</tbody>;

and JSX function as

const handleSearch = async (query, id) => {
  let country = null;
  const foundData = filteredResults.find((data) => data.id === id);

  if (foundData) {
    country = foundData.country;
  }

  if (country) {
    try {
      const data = await searchPlayers(country, query);

      if (data.status === 200) {
        const results = data.data.response.items.map((item) => ({
          value: item.pid,
          label: `${item.title} (DOB: ${item.birthdate ?? "N/A"})`,
        }));

        // Update the specific player's searchQuery and entityResults
        const updatedResults = filteredResults.map((player) => {
          if (player.id === id) {
            return { ...player, searchQuery: query, entityResults: results }; // Update query + results
          }
          return player;
        });

        setFilteredResults(updatedResults); // Set updated results
      } else {
        console.error("API response error");
      }
    } catch (error) {
      console.error("Error fetching entity data:", error);
    }
  } else {
    console.log("No country found for the selected player.");
  }
};

On handleSearch I am trying to call the api and search the related players list. But how ever this is making trouble the List is update but it show [object Promise] in Input the whole body gots jumbled. The white page appears.

Yes so I got the answer as React Select do serve Promises. So here while fetching the New List the Options are going to be append and that to be in Async method.

import AsyncSelect from 'react-select/async';

<AsyncSelect
    cacheOptions
    defaultOptions
    className="form-control"
    loadOptions={(inputValue) => handleSearch(inputValue, data.id)}
    onChange={(selectedOption) => handleEntityChange(selectedOption, data.id)}
    value={data?.selectedEntity || null}
    placeholder="Search Entity Name"
    noOptionsMessage={() => 'No options available'}
/>

So here we are to be in need of React Async Select.