how to read a multipage API using react using Axios

Question

so im trying to use this api that even if you call just the element/people he returns only ten people instead of the 82 total i want , so i have to slowly go through them all and keep adding the values on a list, i wanted to have a list with all the character names and one with all the other results,so i did this (im using SWAPI star wars api btw)

import React, { useEffect, useState } from "react";
import api from "./components/services/api";

export default function App() {
  const [listPeople, setList] = useState(); 
  const [page,setPage]=useState(1)
  const [names,setNames]=useState([]) 
  const [full,setFull]=useState([])   
  const [finished,setFinished] =useState(false);
  useEffect(() => { 
    api
      .get(`people/?page=${page}`)
      .then((response) => setList(response.data))
      .catch((err) => {
        console.error("an error occured: " + err);
      }); 
  },[page]);    
  function  generateList() {   
    if(listPeople.next != null) {
      var i=0 
      while(i <9) {
        setPage(page +1)  
        setNames(names.concat(listPeople.results.map((res) => (res.name)))) 
        setFull(full.concat(listPeople.results))   
        i++
      }  
    } 
    else  { 
      if(!finished) { 
        setNames(names.concat(listPeople.results.map((res) => (res.name)))) 
        setFull(full.concat(listPeople.results))   
        setFinished(true)
      } 
    } 
    console.log(names) 
    console.log(full)
  }  
  return ( 
    <>
    <button onClick={generateList}>click here!</button>  
    <ul></ul>
    </>
  ); 
} 

as you can see i need to press a button everytime i want to get the rest of the elements in the api(first 10 buttons then 20.. until 82) what i wanted was to click the button once and have the whole list(of only the names and of all the results) already in an array/object
but if i try to do that using a while loop the hoops it doesnt work,i ve tried using mapp but cant think of a way to apply it in this situation and the few that i did got me the same effect, and there is no numeric atribute on the api that shows the number of pages, just one that says next with the next page url, like so

ex:https://swapi.dev/api/people
"count": 82, 
    "next": "https://swapi.dev/api/people/?page=2", 
    "previous": null, 
    "results": [
        {
            "name": "Luke Skywalker", 
            "height": "172", 
            "mass": "77", 
            "hair_color": "blond", 
            "skin_color": "fair", 
            "eye_color": "blue", 
            "birth_year": "19BBY", 
            "gender": "male", 
            "homeworld": "https://swapi.dev/api/planets/1/", 
            "films": [
                "https://swapi.dev/api/films/1/", 
                "https://swapi.dev/api/films/2/", 
                "https://swapi.dev/api/films/3/", 
                "https://swapi.dev/api/films/6/"
            ], 
            "species": [], 
            "vehicles": [
                "https://swapi.dev/api/vehicles/14/", 
                "https://swapi.dev/api/vehicles/30/"
            ], 
            "starships": [
                "https://swapi.dev/api/starships/12/", 
                "https://swapi.dev/api/starships/22/"
            ], 
            "created": "2014-12-09T13:50:51.644000Z", 
            "edited": "2014-12-20T21:17:56.891000Z", 
            "url": "https://swapi.dev/api/people/1/"
        }, ... until the 10th person

again i just want to press the button and have the entire list in my console.log, and the '/people' adress doesnt return everything. im still a beginner at react so every help is appreciated, thanks :)