I'm trying to create a select in which I take datafrom two api, I compare these data and show the results in the select.

my select is a Paginate Select so I need to search if there are other data when i call API

const SelectAsyncPaginate = props => {
    const [realmScelto, setRealmScelto] = useState(null);
    const [listaRealm, setListaRealm] = useState([]);

    useEffect(() => {
        setRealmScelto(props.realmScelto);
    }, [props.realmScelto]);

    const loadOptions = async (searchQuery, loadedOptions, { page }) => {
        const response = await fetch(
            `${apiUrl}?page=${page}&size=20&deletedDate.specified=false${searchQuery.length > 3 ? `&appDesapplicazione.contains=${searchQuery}` : ''
            }`
        )

        const response2 = await fetch(
            `${apiUrlRealm}?page=${page}&size=20&deletedDate.specified=false`
        )
        const optionToShow = await response.json();
        const optionToShow2 = await response2.json();
        console.log("optionToShow1", optionToShow)
        console.log("optionToShow2", optionToShow2)


        const notPresent = optionToShow2.filter(ra => {
            return !optionToShow.some(rua => rua.realm.id === ra.id && rua.user.perCod === props.persona.perCod.perCod);
        });
        setListaRealm(previousListRealm => [...previousListRealm, ...notPresent]);
        console.log("listaRealm", listaRealm)

        return {
            options: listaRealm,
            hasMore: listaRealm.length >= 1,
            additional: {
                page: searchQuery ? 2 : page + 1,
            },
        };
    };

    const onChange = option => {
        if (typeof props.onChange === 'function') {
            props.onChange(option);
        }
    };

    return (
        <AsyncPaginate
            value={props.value}
            loadOptions={loadOptions}
            getOptionValue={option => option.realm.id}
            getOptionLabel={option => option.realm.realmId}
            onChange={onChange}
            isSearchable={true}
            placeholder="Seleziona Realm"
            additional={{
                page: 0,
            }}
        />
    );
};

If I use only one api call it works, the problem is when I call the second API because I have a loop of api calls and it not controll if there is another page and it never update the listaRealm

How can I do in your opinion??

What I would to obtain is like:

1. API call (apiUrl)

1.1 Check if there is another page

2. API call (apiUrlRealm)

2.2 Check if there is another page

3. Compare the two results to obtain result