Как решить такую задачу логически?

Всем привет, задача вроде простая, но на фоне того, что нет технического мышления/плохо развита логика и в дагонку я учу реакт недавно, просто сижу час и не могу ничего придумать. https://codesandbox.io/s/priceless-flower-gedylk?f... вот демка, сырая, но я думаю она передаст смысл того, что мне нужно введите в запрос 'k' И так, что тут происходит. Делается с запрос к гитхаб апи и он возвращает 30 репозиториев пользователя. (всего их у пользователя с ником к 88 штук) Я репозитории вывожу по 4 штуки на страницу

const lastReposIndex = page * pageSize;
const firstReposIndex = lastReposIndex - pageSize;
setCurrentRepos(repos.slice(firstReposIndex, lastReposIndex));

**page - текущая страница **pagesize - количество элементов которое я вывожу на страницу (4) Проблема в том, что когда я пролистываю n-кол-во страниц и репозитории кончаются (30 штук, но всего их больше) мне надо сделать запрос повторно с номером другой страницы к гитхаб апи и получить еще 30 страниц. Дак вот, я не понимаю, как мне это делать я единственное, что придумал

if(currentRepos.length < 4) {
  console.log('menshe')  (тут запрос)
}

елать так, но у меня currentRepos получается всегда меньше 4, ну это не удивительно, потому индексы страниц его слайсят под ноль

а больше вроде и нет никаких стейтов, которые меняются ну у меня есть мысли как это сделать с каким-нибудь внешним массивом, в который можно пушить полученные элементы, но это костыль какой-то Необязательно писать решение, любой намек/подсказка будет супер огромной помощью