Github API Not displaying users - reactjs

Question

Having trouble displaying a list of Github usernames and profile pics.
I'm using https://api.github.com/users to fetch the data from the API. I haven't started working on the profile links yet.
Here's what's being displayed
Here's my App.js:
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
function App() {
return (
<Router>
<div className='flex flex-col justify-between h-screen'>
<Navbar />
<main className='container mx-auto px-3 pb-12'>
<Routes>
<Route path='/' element={< Home />} />
<Route path='/about' element={< About />} />
<Route path='/notfound' element={< NotFound />} />
<Route path='/*' element={< NotFound />} />
</Routes>
</main>
<Footer />
</div>
</Router>
);
}
export default App;
Here's UserResults.jsx:
import {useEffect, useState} from 'react'
import Spinner from '../layout/Spinner'
import UserItem from './UserItem'
function UserResults() {
const [users, setUsers] = useState([])
const [loading, setLoading] = useState(true)
useEffect(() => {
fetchUsers()
}, [users])
const fetchUsers = async () => {
const response = await fetch(`https://api.github.com/users`)
const data = await response.json()
setUsers(data)
setLoading(false)
}
if (!loading) {
return (
<div className='grid grid-cols-1 gap-8 xl:grid-cols-4
lg:grid-cols-3 md:grid-cols-2'>
{users.map((user) => (
<UserItem key={user.id} user={user} />
))}
</div>
)
} else {
return <h3><Spinner /></h3>
}
}
export default UserResults
UserItem.jsx which displays the user info:
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
function UserItem({users: login, avatar_url}) {
return (
<div className='card shdow-md compact bg-base-100 '>
<div className='flex-row items-center space-x-4 card-body'>
<div>
<div className='avatar'>
<div className='rounded-full shadow w-14 h-14'>
<img src={avatar_url} alt='profile pic'></img>
</div>
</div>
</div>
<div>
<h2 className='card-title'>{login}</h2>
<Link className='text-base-content text-opacity-40' to={`/users/${login}`}>
Visit Profile
</Link>
</div>
</div>
</div>
)
}
UserItem.propTypes = {
users: PropTypes.object.isRequired,
}
export default UserItem
Feel like I'm missing something with the way I reference the API.
Thank you in advance!

Answer 1

The UserItem component is being called as:
<UserItem key={user.id} user={user} />
You should define it as follows:
function UserItem({key, user}) {
// here you can use user.avatar_url and any other user related key

Answer 2

Seems that object destructuring in UserItem function is written wrong:
function UserItem({users: { login, avatar_url }}) {