I have a problem with my react code. It keeps saying that I can't access property "map", because Object.values(...)[0] is undefined. this will usually mean that whatever is inside my object values is unreachable, or doesnt exit. However it does. I just need to remove pic and grades from persons for it to work. Sometimes i need refresh the page a few times and it will work as well.

anyone know why this might be happening.

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

function App() {
  const [students, setStudents] = useState([])

  const hook = () => {
    axios
      .get('https://api.hatchways.io/assessment/students')
      .then(response => {
        console.log("promise filled")
        setStudents(response.data)
      })
  }

  useEffect(hook, ([]))
  console.log((Object.values(students)[0]))
  const Person = ({ firstname, lastname, email, company, skill, grades
    , pic }) => {

    const temp = grades.reduce((a, b) => Number(a) + Number(b), 0)
    const average = temp / grades.length

    return <>
      <div>
        <img src={pic} />
        <h1>{firstname}  {lastname}</h1>
        <p>Email: {email}</p>
        <p>Company: {company}</p>
        <p>Skill: {skill}</p>
        <p>Average: {average}%</p>



      </div>
    </>

  }


  return (
    <div class = "wrapper">
      {((Object.values(students))[0]).map(person =>
        <Person

          firstname={person.firstName}
          lastname={person.lastName}
          email={person.email}
          company={person.company}
          skill={person.skill}
          pic={person.pic}
          grades={person.grades}
          key={person.id}


        />

      )}






    </div>

  )




}


export default App;