I'm creating a select with data recovered from two api calls.

I call the first api to obtain all result of people.

I call the second api (with pagination, so I make any time the page number to obtain every time 20 more data).

Now from the result of the second api call I should disable or not show the same results as the first api call.

This is my code:

const SelectAsyncPaginatePeople = props => {
  const [listPeople, setListPeople] = useState(null)
 
  useEffect(() => {
    findListPeople()
  }, [])

  const findListPeople = async () => {
    const response = await fetch(`${apiCall1}`)
    const optionListPeople = await response.json();
    setListPeople(optionListPeople);
  }

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


    let optionToShow = []

    optionToShow.push(...optionToShow, ...optionPerson.filter((re) => !listPeople.some((rent) => { return re.peopleID === rent.personID })))

    return {
      options: optionToShow,
      hasMore: optionToShow.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.personID}
      getOptionLabel={option => option.personName}
      onChange={onChange}
      isClearable={true}
      isSearchable={true}
      placeholder="Select Person"
      additional={{
        page: 0,
      }}
    />
  );
};

Now in this way I obtain the first 20 data from the apicall2, and I filter with the result from the apiCall1.

But the problem is when I call second page (for the apiCall2), the data aren't filtered another time with the data of apiCall1.

What I would to obtain:

ApiCall1: dataApiCall1,
ApiCall2 (with page: 1) : dataApiCall2(first 20 data)
dataApiCall2 - dataApiCall1 = dataNotIncludedinApiCall1 // and this work.
ApiCall2 (with page: 2) : dataApiCall2(other 20 data)
dataApiCall2 - dataApiCall1 = dataNotIncludedinApiCall1

...