title: antd Select Option not rendering when entering text in React Hooks
body: <p>I'm trying to implement a search box with remote data using <code>antd</code>'s <code>Select</code> and <code>Option</code>. I'm expecting that when I enter text into the search box, a list of options will be rendered immediately. Instead, the options only appear after when I clear the search box.</p>
  <p>I have these states:</p>
  <pre><code>const [symbol, setSymbol] = useState(&quot;&quot;);
  const [searchResults, setSearchResults] = useState&lt;React.ReactNode[]&gt;();
  </code></pre>
  <p>and this component:</p>
  <pre><code>&lt;Select
    showSearch
    value={symbol}
    onSearch={handleSearch}
    onChange={handleChange}
  &gt;
    {searchResults}
  &lt;/Select&gt;
  </code></pre>
  <p>This is my handleSearch function:</p>
  <pre><code>const handleSearch = (value: string) =&gt; {
    if (value) {
      fetchStocksList(value, (data) =&gt; setSearchResults(data));
    }
  };
  </code></pre>
  <p>This is the function used to fetch data from an api, the <code>console.log()</code> below can correctly log the data that I wanted:</p>
  <pre><code>const fetchStocksList = (
    value: string,
    callback: (data: React.ReactNode[]) =&gt; void
  ) =&gt; {
    axios
      .get(`${API_SERVER}/api/stocksinfo?search=${value}`)
      .then((res) =&gt; {
        let data: React.ReactNode[] = [];
        res.data.forEach((row: any) =&gt; {
          data.push(
            &lt;Option value={row.symbol}&gt;{row.symbol + &quot;: &quot; + row.name}&lt;/Option&gt;
          );
        });
        return data;
      })
      .then((data) =&gt; {
        console.log(data);
        callback(data);
      })
      .catch((err) =&gt; console.error(err));
  };
  </code></pre>
  <p>May I ask why does the options not appear until after I clear the text that I entered in the search box?</p>