I'm using Inertia.js and I've been loving it.

I'm having a problem anyway that I cant seem to figure out. I have a select input that will contain options from the database but a lot of them aprox. 30/40k so my idea is to just take the first 20 and then let the user input a search and bring the first 20 that match that result.

All my backend is working ok but the problem I'm having is displaying the updated select options after search.

The relevant code is the following: First the call to AsyncSelect Component from the react-select package. This components needs a loadOptions property that will call a function when the user start typing

<AsyncSelect
    name="proveedores"
    id="proveedores"
    defaultOptions={proveedores}
    loadOptions={handleChange}
 /> 

The function that gets call is this, it recieves the input value and a callback, within this callback I'm supposed to search for the new data and return it

function handleChange(inputValue,callback) {
        setValues(values => ({
            ...values,
            ["search"]: inputValue
        }));

        callback()
    }

The problem is that to load the new data on search I'm using useEffect

useEffect(() => {
        if (prevValues) {
            const query = pickBy(values)
            Inertia.get(window.location.href, query, {
                replace: true,
                preserveState: true
            });
        }

    }, [values]);

The search with useEffect works ok, if I do a console.log I will see the list of proveedores updated but the problem is how do I tell the callback from handleChange function that it should listen for useEffect and on finish use the new value of proveedores

If anyone had to do something like this (React Select with search data from database) using Inertia + React, i would really appreciate some feedback on how to achieve it.

Thanks!!