'loadOptions is updating before onInputChange in AsyncSelect

The problem is that the query value is always "lagging" behind the input. When I type in AA, then the API call is to http://localhost:8000/burst/sample/A, with AAB it woul be to .../AA, and so on.

What am I missing here?

Relevant code:

const [selectedBurst, setSelectedBurst] = useState(null);
const [query, setQuery] = useState("");
const loadOptions = async () => {
    const response = await axios
        .get(
            'http://localhost:8000/burst/sample/' + query
        );
    return (response.data);
};

.....

                    <AsyncSelect
                        getOptionValue={option => option._id}
                        getOptionLabel={option => option.sample_id}
                        loadOptions={loadOptions}
                        onChange={setSelectedBurst}
                        name='sample'
                        cacheOptions
                        defaultOption
                        onInputChange={value => setQuery(value)}

                    />


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source