React not fetching data anymore - reactjs

Question

Hi there I'm fairly new to react and I'm trying to create a student management app with React as a frontend and i can't seem to get the page to return a list of students since I tried working with the functions useHistory and useNavigate from react-router-dom to try redirect to an individual student component but I was unable to get them working on my project so I removed them.
The page was rendering the student objects from the backend API i created just fine before I tried implementing the two functions but now won't render any student object, all that is displayed are the table heads but not the table rows any help on what the problem would be appreciated
here is my hook component to fetch data before using useHistory & useNavigate
function GetAllStudents() {
const [students, setStudents] = useState([]);
const fetchData = async () => {
StudentService.getStudents() //axios service function used to fetch data
.then((res) => res.json())
.then((res) => {
const currentStudent = res.data;
setStudents(currentStudent); // try setStudents(res.data) if fails
})
.catch((err) => {
console.log(err);
});
// fetchData();
};
useEffect(() => fetchData(), []);
return (
<div class="container">
<div class="form container p-4">
<h1>Week 10 - React Frontend </h1>
<a href="/add" class="btn btn-success">
Add Student
</a>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{students.map((student) => (
<tr key={student.id}>
<td> {student.firstname} </td>
<td> {student.lastname}</td>
<td> {student.email}</td>
<td>
<button className="btn btn-info">Edit</button>
<button
style={{ marginLeft: '10px' }}
className="btn btn-danger"
onclick="return confirm('Do you Really want to delete')">
Delete{' '}
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default GetAllStudents;
When I inspect elements on my browser it shows the state is not saving the objects to the array
I don't know what I misconfigured because even when I change the function to a class component that also previously worked properly doesn't display the objects anymore
import React, { Component } from 'react';
import StudentService from '../services/StudentService';
class GetAllStudents extends Component {
constructor(props) {
super(props);
this.state = {
students: [],
};
this.addStudent = this.addStudent.bind(this);
this.editStudent = this.editStudent.bind(this);
this.deleteStudent = this.deleteStudent.bind(this);
}
deleteStudent(id) {
StudentService.deleteStudent(id).then((res) => {
this.setState({
students: this.state.students.filter((student) => student.id !== id),
});
});
}
updateStudent(id) {
this.props.history.push(`/students/${id}`); // props(parameter) to navigate to edit student component
}
editStudent(id) {
this.props.history.push(`/edit/${id}`); // props(parameter) to navigate to edit student component
}
componentDidMount() {
StudentService.getStudents().then((res) => {
this.setState({ students: res.data }); //loads all students in database
});
}
addStudent() {
this.props.history.push('/add'); //function to navigate to edit student component with form to add student
}
render() {
return (
<div class="container">
<div class="form container p-4">
<h1>Week 10 - React Frontend </h1>
<a href="/add" class="btn btn-success">
Add Student
</a>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.state.students.map((student) => (
<tr key={student.id}>
<td> {student.firstname} </td>
<td> {student.lastname}</td>
<td> {student.email}</td>
<td>
<button
onClick={() => this.updateStudent(student.id)}
className="btn btn-info">
Edit
</button>
<button
style={{ marginLeft: '10px' }}
onClick={() => this.deleteStudent(student.id)}
className="btn btn-danger"
onclick="return confirm('Do you Really want to delete')">
Delete{' '}
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}
export default GetAllStudents;
when I check my backend it shows calls are being made to the server but react isn't fetching or displaying data
any help on how to solve this problem would be appreciated as I currently don't know what I did wrong