Как только с сервера будет получена информация о персонажах какого-либо фильма, вывести эту информацию на экран под названием фильма

const linkInitial = "https://ajax.test-danit.com/api/swapi/films"



const root = document.getElementById("root")
const ul = document.createElement("ul");
root.append(ul)



fetch(linkInitial)
  .then(response => response.json())
  .then(filmList => {
    filmList.forEach(element => {
      renderFilm(element)
    });
    return filmList
  })
  .then(filmList => {
    let urlList = [];
    filmList.forEach(({characters}) => {
      urlList.push(characters)
    })
    return urlList;
  })
  .then(urlList => {
    let chapter = [];
    urlList.forEach((el) => {
      el.forEach((link) => {
        console.log(link);
      })
    })
    
  })
   .then( => {
   
   })
  .catch(function (error) {
    console.log(error)
  })

  function renderFilm({openingCrawl, episodeId, name, id}) {
    ul.innerHTML += `<li id=${id}>Name: ${name}, 
    <br> Episode: ${episodeId},
     <br> Crawl: ${openingCrawl}</li>`
  }

  function urlFetch(url) {
    fetch(url) 
        .then(response => response.json())
        .then(data => data.name)
  }