I'm trying to display student data and the courses they are enrolled in from a a simple API I made.

Here's the result from the API https://localhost:44309/api/Students

[
  {
    "id": 1,
    "lastName": "Rizal",
    "firstName": "Jose",
    "courses": [
      "C#",
      "Javascript",
      "CSS"
    ]
  },
  {
    "id": 2,
    "lastName": "Bonifacio",
    "firstName": "Andres",
    "courses": [
      "HTML",
      "ASP.NET MVC"
    ]
  },
  {
    "id": 3,
    "lastName": "Sora",
    "firstName": "Tandang",
    "courses": [
      "CSS",
      ".NET"
    ]
  }
]

Here's my Javascript code

import React from "react"
import { useState, useEffect } from "react";


const StudentList = () => {
    const [students, setStudent] = useState([]);
    
    const getData = async () => {
      const response = await fetch("https://localhost:44309/api/students");
      const data = await response.json()
      setStudent(data)
    }
  
    useEffect(() => {
        getData()
    }, []);

    return (
        <div className="student-list">
            <h2>Students and their courses</h2>
            {students.map(student => (
                <div className="student-preview" key={student.id}>
                    <p>{ student.fname } { student.lname }</p>
                    <p>{ student.courses }</p>
                </div>
            ))}
        </div>
    )
}

export default StudentList

I'm getting an error saying Uncaught ReferenceError: students is not defined

I wonder what I'm doing wrong.