How to display results of API on new page

Question

I'm trying to display each film on a new HTML page with the character for that film. Basically clicking on one of the film names should take the user to a page/view that shows that film name along with some details about that film such as the release date. It would also show a list of characters that appear in that film with links to take the user to a page/view for each character.

import axios from "axios";

const fetchAndDisplay = async () => {
  const res = await axios.get("https://swapi.dev/api/people");
  await displayPeople(res.data.results);
};

const displayPeople = async (data) => {
  const personData = await Promise.all(
    data.map(async (person) => {
      console.log(person);
      return { ...person, films: await getMovies(person.films) };
    })
  );

  personData.forEach((person) => {
    let a = document.createElement("a");
    let linkText = document.createTextNode(person.films);
    a.appendChild(linkText);

    // a.title = "sss";
    a.href = "films.html";
    document.body.appendChild(a);

    //create names with their info
    let mainContainer = document.getElementById("myData");

    let div = document.createElement("div");
    div.innerHTML =
      "Name " +
      person.name +
      " Hair Color  " +
      person.hair_color +
      "  Birth Year: DOB " +
      person.birth_year;
    mainContainer.appendChild(div);
    mainContainer.appendChild(a);
  });
};

//fetch api from films array

const getMovies = (movies) => {
  return Promise.all(
    movies.map(async (movie) => {
      const res = await axios.get(movie);
      //   console.log(res.data)
      return res.data.title;
    })
  );
};

fetchAndDisplay().catch((err) => {
  console.error("Ooops! There is an error with fetching the data", err);
});

https://codesandbox.io/s/films-7zk9l?file=/src/app.js