我在获取数据时遇到此错误，仅用于练习，我不想使用 JSON.stringfy，我认为这不是一个好习惯，请详细说明并解决，谢谢

错误：对象作为 React 子项无效（找到：带有键 {title、episode_id、opening_crawl、director、producer、release_date、characters、planets、starships、vehicles、species、created、edited、url} 的对象）。如果您要呈现子项集合，请改用数组。

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

function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    const fetching = async () => {
      const response = await fetch('https://swapi.dev/api/films')
      const { results } = await response.json();
      const transformedData = results.map((el) => {
        return {
          id: el.episode_id,
          title: el.title,
          text: el.opening_crawl,
          date: el.releaseDate
        };
      });
      setData(transformedData);
    }
    fetching();
  })

  const outputedData = data.map((el) => {
    <div>
      <p>{el.id}</p>
      <p>{el.title}</p>
      <p>{el.text}</p>
      <p>{el.date}</p>
    </div>
  })

  return (
    <div className="App">
      {outputedData}
    </div>
  );
}

export default App;


console.log(results)

6) [{…}, {…}, {…}, {…}, {…}, {…}]0: {title: "A New Hope", episode_id: 4......}