Note: I'm very new when it comes to rendering APIs.

Recently, I was assigned homework for calling and rendering API data from any API of our choosing. I chose the Swapi Star Wars API do it its high popularity. After choosing my API of choice, I was assigned to call and display all 60 planets within the Star Wars API. After wrestling with the API for the last two days, my calls to the API displayed only 10 sets of data. I've kept trying to utilize the useEffect and useCallback hooks for clean up purposes along with along with utilizing different conditions in order to set up and terminate a loop to get all sets of data but yet to no avail, I couldn't get the rest of the data to render. After utilizing Postman to display the data from the API call, I can't seem to find a definitive solution to display all 60 planets within the Swapi Star Wars API. Would be really appreciated if anyone can help me. Cheers.

Here is my code:

import React, {useEffect, useState} from 'react';

function App() {
  const [planets, setPlanets] = useState([]);
  const [url, setURL] = useState(`https://swapi.dev/api/planets/`);

  useEffect(() => {
    async function fetchPlanets(){
      let res = await fetch(url);
      let data = await res.json();
      do{
        setPlanets(data.results);
        setURL(data.next);
      } while(data.next !== null)
    }
      fetchPlanets();
  },[planets, url]);

  return (
    <div className="App">
      {planets && planets.map((planet,i) => {
        return(
          <h1 key={i}>
            {planet.name}
          </h1>
        );
      })}
    </div>
  );
}

export default App;