我需要在每个人卡中显示来自swapi.co的电影标题

import React,{useEffect} from 'react';
import './App.css';

const App = () => {
  const [person,setPerson] = React.useState([]);
  const [films,setfilms] = React.useState([]);

  useEffect(() =>{
    fetchData('https://swapi.co/api/')
      .then(res => {
        fetchData(res.people).then(people => setPerson(people.results));
        fetchData(res.films).then(films => setfilms(films.results));
      });
  },[])


  async function fetchData(url) {
    const response = await fetch(url);
    return response.json();
};

  return(
    <>
      {person.map(item => ( 
        <div key={item.url}>{item.name}
          <ul>
            {item.films.map(el => (
              <li>
                {el}
            </li>
            ))}                    
          </ul>
        </div>
      ))}

    </>
  )
}

export default App;

我不知道该怎么做，因为在渲染方法中，“ item.films”以带有链接的arr返回。我如何更改电影标题的链接？