Бесконечная прокрутка в React Native с использованием Flatlist

Question

Я получаю данные из API, который ограничивает 20 элементов на странице. Я пытаюсь реализовать прокрутку, чтобы по достижении конца из 20 элементов была получена и отображена новая страница с дополнительными 20 элементами, но я также хочу сохранить все предыдущие элементы и сделать ее доступной при прокрутке вверх, и вот где я терплю неудачу.

Это то, что я делаю пошагово.

1. Я рендеринг экрана
2. срабатывает useEffect и я получаю первую страницу API
3. , затем первая партия из 20 элементов обрабатывается с использованием Flatlist
4. , когда я прокручиваю до конца, я вызываю функцию [loadMoreCommit], которая увеличивает [ page] by 1
5. снова используется useEffect, поскольку имеет зависимость от [page] и выбирает следующую партию из 20 элементов и т. д. ...

Все работает должным образом до сих пор, за исключением того факта, что я вижу только 20 элементов одновременно и теряю все предыдущие.

  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  const loadMoreCommit = () => {
    setPage(page + 1);
  };

useEffect(() => {
    fetch(
      `https://api.themoviedb.org/3/person/popular?api_key=${ENV.tmdbApiKey}&page=${page}`
    )
      .then((res) => res.json())
      .then((res) => {
        setData(res.results);        
      });
    setIsLoading(false);
  }, [page]);

return (
          <FlatList            
            data={data}
            initialNumToRender={10}            
            keyExtractor={(item) => item.id.toString()}
            onEndReached={loadMoreCommit}
            onEndReachedThreshold={0.5}
            renderItem={(itemData) => (
              <StarsItem
                id={itemData.item.id}
                count={count++}
                backdrop={itemData.item.profile_path}
                poster={itemData.item.profile_path}
                title={itemData.item.name}
              />
            )}
          />
)

Читая другие записи, я пытался сохранить исторические данные, заменив

setData(res.results);

Если я использую

setData({ data: [...data, ...res.results] });

Я получаю "Недопустимая попытка распространить не повторяемый экземпляр" предупреждение

Я также пытался объединить предыдущие и новые значения, которые работают в некоторых руководствах, но я получаю ошибку

setData({ data: data.concat(res.results) });

data.concat не является функцией