title: Antd Select Search Box not rendering the matches
body: <p>I have the data of products, and I am filtering the data using a search value and then rendering the options using that filtered data. The products data is coming from the global redux store as a prop. For some reason, the dropdown shows data only when the search value is null, when I start typing, the <code>filteredData</code> is updated and the component get re-rendered as well, but the options show no data.</p>
  <p>I have checked whether the right <code>filteredData</code> is used to map over the options. The options does not seem to render even when the component is re-rendered.</p>
  <p>Please have a look at the code below :</p>
  <pre><code>import React from 'react';
  // import {useState} from 'react';
  import {Select} from 'antd';
  import {connect} from 'react-redux';
  import {fetchProductsAsync} from 'common/actions/fetchData';
  
  const {Option} = Select;
  
  class SelectOptions extends React.Component {
    state = {
      filteredData: [],
      value: undefined,
    };
  
    componentDidMount() {
      const {fetchProductsAsync} = this.props;
      fetchProductsAsync();
      const {products} = this.props;
      this.setState({filteredData: products || []});
    }
  
    componentDidUpdate() {
      console.log(this.state.filteredData);
    }
  
    filterData = (value) =&gt; {
      const {products} = this.props;
      const filData = products.filter((prod) =&gt; {
        return prod.name.includes(value);
      });
      // console.log(filData);
      this.setState({filteredData: filData});
    };
  
    handleSearch = (value) =&gt; {
      const {products} = this.props;
      if (value) {
        // this.setState({value});
        this.filterData(value);
        // console.log('yes');
      } else {
        console.log('empty');
        this.setState({filteredData: products});
        this.forceUpdate();
      }
    };
  
    handleChange = (value) =&gt; {
      // console.log(value);
      this.setState({value});
    };
    render() {
      const {others} = this.props;
      // console.log(this.state.filteredData);
      const options = this.state.filteredData.map((item, index) =&gt; {
        console.log(item);
        return (
          &lt;Option value={item.value || item[others.key] || item}&gt;
            {others.customTitle ? (
              &lt;text style={{fontSize: 13, fontWeight: 'bold'}}&gt;{item[others.customTitle]}&lt;/text&gt;
            ) : (
              item.label || item[others.key] || item
            )}
            {others.dataKeys ? (
              &lt;div className=&quot;row&quot; style={{flexWrap: 'wrap'}}&gt;
                {others.dataKeys.map((i) =&gt; (
                  &lt;text style={{fontSize: 11, marginLeft: 5, marginRight: 5}}&gt;{item[i]}&lt;/text&gt;
                ))}
              &lt;/div&gt;
            ) : null}
          &lt;/Option&gt;
        );
      });
      return (
        &lt;Select
          showSearch
          onSearch={this.handleSearch}
          // placeholder=&quot;Select&quot;
          // key={this.state.filteredData.length}
          value={this.state.value}
          onChange={this.handleChange}&gt;
          {options}
        &lt;/Select&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {products: state.data.products || []};
  };
  
  export default connect(mapStateToProps, {fetchProductsAsync})(SelectOptions);
  </code></pre>