从reactjs中的API获取数据时出错

我正在尝试使用react useEffect挂钩从https://randomuser.me/api/获取数据。代替要显示的数据，我收到一个错误，“错误：对象作为React子对象无效（找到：带有键{number，name}的对象）。如果要渲染子代的集合，请使用数组代替”。我在控制台上记录了结果，我意识到问题出在某些嵌套对象上，这些对象输出[object Object]。但是，我不知道为什么其他嵌套对象正确显示。下面是我的代码：

import { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import '../../App.css';

const UsersList = () => {

  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch("https://randomuser.me/api/")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.results);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <div>
        {items.map((item, id) => (
        <div className="card content-panel" key={id}>
          
          <img src={item.picture.medium} alt="Profile pic" className="avatar-user-list" />

          <div className="card-text">
            <p>
              {item.name.first} &nbsp; {item.name.last}
            </p>
            <p>{item.location.street}</p>
            <p>{item.email}</p>
          </div>

          <div className="arrow-bg">
            <span className="arrow">&#x2192;</span>
          </div>        
        </div>
        ))}
      </div>
    );
  }
}

export default UsersList;