I'm creating a select (at the moment i'm using React-Select component) to retrive all the result from the api.

The problem is that API gives me back 20 values, so I should find a method to load other 20 values ( as I make another api call )

const option = personList && personList .map((spl) => {
    return {
      value: spl.perCod,
      label: spl.perName
    }
  })

          <Row>
            <Col>
              <Select
                id="perCod"
                name="perCod"
                options={option}
              />
            </Col>
          </Row>

the personList is populated calling the api:

  useEffect(() => {
    sortEntities();
  }, [paginationState.activePage, paginationState.order, paginationState.sort]);

const sortEntities = = () => {
//...
 props.getFilteredEntities(
        search, // i pass there the parameters for the research
        paginationState.activePage - 1,
        paginationState.itemsPerPage,
        `${paginationState.sort},${paginationState.order}`
      ),
}

props.getFilteredEntities in my reducer is:

export const getFilteredEntities: ICrudSearchAction<Person> = (search, page, size, sort) => {
  const params = new URLSearchParams(search) ? new URLSearchParams(search).toString() : null;
  const requestUrl = `${apiUrl}${sort ? `?page=${page}&size=${size}&sort=${sort}` : ''}${sort ? '&' : '?'}${params}`;
  return {
    type: ACTION_TYPES.FETCH_PERSON_LIST,
    payload: axios.get<Person>(`${requestUrl}${sort ? '&' : '?'}cacheBuster=${new Date().getTime()}`),
  };
};

At the moment my select has the first 20 results from api. I should need to load others. How can I do? thank you.