Reactjs React中的API分页

我正在构建一个图表组件，它根据日期选择器选择的日期从API接收数据

处理日期和调用API。问题是，当数据较大（>50个结果）时，下一个数据将进入

next

属性中的对象内部。我应该从返回的

下一个
中处理它

返回的数据是这样的：

    average_satisfaction: 4.8307692307692305
    next: "nextURL"
    page_size: 50
    previous: null
    results: (50) [{…}, {…}]
    total_count: 130

我正在考虑一个处理API的函数，我只是从
useffect
调用它，但我不知道如何让它检查这个
next
，然后接收新数据并推送它

 const [results, setResults] = useState([]);

  useEffect(() => {
    if (startDate.length != 0) {
      handleAPIRequest(`someURL`).then((response) => console.log(response.data));
    }
  }, [startDate, endDate]);

  function handleAPIRequest(url) {
    return axios
      .get(url)
      .then((response) => {
        setResults(response.data.results);
        // here is where response.data.next has url of next 50 results
        return response;
      });
  }

保存状态中的所有结果，而不仅仅是data.results

  function handleAPIRequest(url) {
    return axios
      .get(url)
      .then((response) => {
        setResults(response.data);
        // here is where response.data.next has url of next 50 results
        return response;
      });
  }

在渲染中，可以有如下按钮

return ( <button onClick={() => handleAPIRequest(response.data.next)}>Get Next</button> )

我需要先得到所有的结果才能进行计算。
  function handleAPIRequest(url) {
    return axios
      .get(url)
      .then( async (response) => {

        let finalResults = response.data.results;
        if (response.data.next) {
           let moreResults = await handleAPIRequest(response.data.next);
           finalResults.concat(moreResults)
        }

        // here is where response.data.next has url of next 50 results
        return finalResults;
      });
  }