Simple React useState and useEffect

 import { useState, useEffect } from "react";

const StudentList = () => 

{

const [studentList, setStudentList] = useState([

{

firstName : "",

lastName : ""

}

]);

useEffect(()=> {

setStudentList([{firstName: "first001" , lastName : "Last001"}]);

setStudentList((prevList) => [...prevList , {firstName: "first002", lastName : "last002"}]);

setStudentList((prevList) => [...prevList , {firstName: "first003", lastName : "last003"}]);

setStudentList((prevList) => [...prevList , {firstName: "first004", lastName : "last004"}]);

setStudentList((prevList) => [...prevList , {firstName: "first005", lastName : "last005"}]);

}, []);

const handleAdd = () => {

setStudentList((prevList) => [...prevList , {firstName: "first006", lastName : "last006"}]);

}

return(

<>

<button onClick={handleAdd}>Add New </button>

<ul>

{

studentList.map(student=> {

return (<li>{student.firstName} {student.lastName} </li>); }

) 

}

</ul>

</>

);

} 

export default StudentList;

clear App.css and index.css

import StudentList from  "./StudentList.jsx";

function App() {

  return (

    <>

  <StudentList/>

    </>

  )

}

export default App