title: How to use react-select-async-paginate library on change of different select?
body: <p>I am trying to implement 2 select box
  1st select box will be the simple select box.
  2nd select box will have infinite scroller functionality and for this, I am using the <strong><a href="https://github.com/vtaits/react-select-async-paginate/tree/master/packages/react-select-async-paginate" rel="nofollow noreferrer">react-select-async-paginate</a></strong> library.</p>
  <p><strong>Issue Explanation</strong></p>
  <p>AsyncPaginate is the component of react-select-async-paginate library. It uses loadOptions function attribute to load the option into the select box and it expect return value as {options: [], hasMore: false}.</p>
  <p>In my code, in the loadOptions attribute, I am calling the loadHostOptions function to get the options. And on change of the first dropdown, I am calling loadHostOptions function. But in this case, correct options are not reflected in the 2nd dropdown.</p>
  <p>Can anyone help me with how to load options on the change of the first dropdown?</p>
  <p><a href="https://codesandbox.io/s/simple-example-forked-d21yys" rel="nofollow noreferrer">Here is codesandbox</a></p>
  <p><strong>Code</strong></p>
  <pre><code>import React from &quot;react&quot;;
  
  import { AsyncPaginate } from &quot;react-select-async-paginate&quot;;
  
  class App extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        firstSelectVal: &quot;&quot;,
        value: null
      };
    }
  
    firstSelectChange = (event) =&gt; {
      this.setState({ firstSelectVal: event.target.value });
      if (event.target.value) {
        this.loadHostOptions(&quot;java&quot;, []);
      }
    };
  
    onPagiChange = (event) =&gt; {
      this.setState({ value: event});
    };
  
    loadHostOptions = async (search, prevOptions) =&gt; {
      if (search === &quot;java&quot;) {
        const responseJSON = {
          results: [
            {
              value: 1,
              label: &quot;Java&quot;
            }
          ],
          has_more: false
        };
  
        return {
          options: responseJSON.results,
          hasMore: responseJSON.has_more
        };
      } else {
        const responseJSON = {
          results: [
            {
              value: 1,
              label: &quot;Java&quot;
            },
            {
              value: 2,
              label: &quot;C++&quot;
            },
            {
              value: 3,
              label: &quot;Python&quot;
            },
            {
              value: 4,
              label: &quot;Node&quot;
            },
            {
              value: 5,
              label: &quot;Go, Lang&quot;
            }
          ],
          has_more: false
        };
  
        return {
          options: responseJSON.results,
          hasMore: responseJSON.has_more
        };
      }
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;react-select-async-paginate&lt;/h1&gt;
          &lt;h2&gt;1st Selectbox&lt;/h2&gt;
          &lt;select
            id=&quot;lang&quot;
            onChange={this.firstSelectChange}
            value={this.state.firstSelectVal}
          &gt;
            &lt;option value=&quot;&quot;&gt;Select&lt;/option&gt;
            &lt;option value=&quot;java&quot;&gt;Java&lt;/option&gt;
          &lt;/select&gt;
          {this.state.firstSelectVal ? (
            &lt;&gt;
              &lt;h2&gt;2nd Selectbox&lt;/h2&gt;
              &lt;AsyncPaginate
                value={this.state.value}
                loadOptions={(search, prevOptions) =&gt;
                  this.loadHostOptions(search, prevOptions)
                }
                onChange={(e) =&gt; this.onPagiChange(e)}
              /&gt;
            &lt;/&gt;
          ) : (
            &quot;&quot;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>