React Typescript — объекты ошибок недействительны в качестве дочернего элемента React

Я пытаюсь получить данные из Random user API, но получаю следующую ошибку:

Объекты недействительны в качестве дочерних элементов React (найдено: объект с ключами {название, первый, последний}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Вот мой код до сих пор:

import "./styles.css";
import React, { useState, useEffect } from "react";
import { User } from "../interfaces/users";
import axios, { AxiosResponse } from "axios";
export default function App() {
  const [randomUsers, setRandomUsers] = useState<User[]>([]);

  useEffect(() => {
    axios
      .get<User[]>("https://randomuser.me/api/?results=20")
      .then((response: AxiosResponse) => {
        setRandomUsers(response.data.results);
      });
  }, []);

  return (
    <div className="App">
      <h1>Names from random user API</h1>
      <ul>
        {randomUsers.map((user, key) => (
          <li key={key}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Я не понимаю, почему я не могу сопоставить randomUsers

Здесь код песочнице< /а>: