Swiper and .Map

I can't load data from an object in my Swyper, I can't create dynamic slide with data obtained from an array

export default function People({ data }) {
const [people, setPeople] = useState([]);
const [loading, setLoading] = useState([true]);


useEffect(() => {
  async function fetchPeople() {
    let res = await fetch('https://swapi.dev/api/people/?format=json');
    let data = await res.json();
    setPeople(data.results);
    setLoading(false);
  }
  
  fetchPeople();
  }, [])

  console.log("data", people);
  

  return (
    <>
      <h1>People</h1>
      <Swiper
        spaceBetween={50}
        slidesPerView={3}
        navigation
        pagination={{ clickable: true }}
      >
        {people
          ? people.map((people, index) => {
            return (
              <SwiperSlide key={index} className="slide">
                <div className="slide-content">
                  <div className="user-image">
                    <img src="" alt="" className="user-photo" />
                  </div>
                  <h5>{people.name}</h5>
                  <p>{people.homeworld}</p>
                </div>
              </SwiperSlide>
          )})
          : "Loading"}
      </Swiper>
    </>
  );
}

I expect to load a slide for each card built with the API data, but I can't get the code to create it right. The slide loads all of my array information on a single slide, and I would like to load a slide for each card.

[
    {
        "title": "A New Hope",
        "episode_id": 4,
        "opening_crawl": "It is a period of civil war.\r\nRebel spaceships, striking\r\nfrom a hidden base, have won\r\ntheir first victory against\r\nthe evil Galactic Empire.\r\n\r\nDuring the battle, Rebel\r\nspies managed to steal secret\r\nplans to the Empire's\r\nultimate weapon, the DEATH\r\nSTAR, an armored space\r\nstation with enough power\r\nto destroy an entire planet.\r\n\r\nPursued by the Empire's\r\nsinister agents, Princess\r\nLeia races home aboard her\r\nstarship, custodian of the\r\nstolen plans that can save her\r\npeople and restore\r\nfreedom to the galaxy....",
        "director": "George Lucas",
        "producer": "Gary Kurtz, Rick McCallum",
        "release_date": "1977-05-25",
        "characters": [
            
            "https://swapi.dev/api/people/16/",
            "https://swapi.dev/api/people/18/",
            "https://swapi.dev/api/people/19/",
            "https://swapi.dev/api/people/81/"
        ],
        "planets": [
            "https://swapi.dev/api/planets/1/",
            "https://swapi.dev/api/planets/2/",
            "https://swapi.dev/api/planets/3/"
        ],
        "starships": [
            "https://swapi.dev/api/starships/2/",
            "https://swapi.dev/api/starships/3/",
            "https://swapi.dev/api/starships/5/",
            "https://swapi.dev/api/starships/9/",
            "https://swapi.dev/api/starships/10/",
            "https://swapi.dev/api/starships/11/",
            "https://swapi.dev/api/starships/12/",
            "https://swapi.dev/api/starships/13/"
        ],
        "vehicles": [
            "https://swapi.dev/api/vehicles/4/",
            "https://swapi.dev/api/vehicles/6/",
            "https://swapi.dev/api/vehicles/7/",
            "https://swapi.dev/api/vehicles/8/"
        ],
        "species": [
            "https://swapi.dev/api/species/1/",
            "https://swapi.dev/api/species/2/",
            "https://swapi.dev/api/species/3/",
            "https://swapi.dev/api/species/4/",
            "https://swapi.dev/api/species/5/"
        ],
        "created": "2014-12-10T14:23:31.880000Z",
        "edited": "2014-12-20T19:49:45.256000Z",
        "url": "https://swapi.dev/api/films/1/"
    },
]