Redux toolkit data is not fetching - reactjs

Question

The problem I'm facing my accidents array is empty for some reason, and receiving <h3>You have no accidents </h3>. console.log(accidents._id); this log returns undefined. Thank you in advance for the help and taking a look into this.
Slice:
import { createSlice, createAsyncThunk } from "#reduxjs/toolkit";
import accidentService from "./accidentService";
const initialState = {
accidents: [],
isError: false,
isSuccess: false,
isLoading: false,
message: "",
};
// Create new accident report
export const createAccident = createAsyncThunk(
"home/create",
async (accidentData, thunkAPI) => {
try {
const token = thunkAPI.getState().auth.user.token;
return await accidentService.createAccidentReport(accidentData, token);
} catch (error) {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);
// Get accident reports
export const getAccidents = createAsyncThunk(
"accidents/getAll",
async (_, thunkAPI) => {
try {
const token = thunkAPI.getState().auth.user.token;
return await accidentService.getAccidents(token);
} catch (error) {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);
export const accidentSlice = createSlice({
name: "accident",
initialState,
reducers: {
reset: (state) => initialState,
},
extraReducers: (builder) => {
builder
.addCase(createAccident.pending, (state) => {
state.isLoading = true;
})
.addCase(createAccident.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.accidents.push(action.payload);
})
.addCase(createAccident.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
})
.addCase(getAccidents.pending, (state) => {
state.isLoading = true;
})
.addCase(getAccidents.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.goals = action.payload;
})
.addCase(getAccidents.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
});
},
});
export const { reset } = accidentSlice.actions;
export default accidentSlice.reducer;
Service:
import axios from "axios";
const API_URL = "/api/home/accidentReport";
// Create new accident report
const createAccidentReport = async (accidentData, token) => {
//Get token
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
};
const response = await axios.post(API_URL, accidentData, config);
return response.data;
};
//Get accident reports
const getAccidents = async (token) => {
//Get token
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
};
const response = await axios.get("/api/home/allAccidents", config);
return response.data;
};
const accidentService = {
createAccidentReport,
getAccidents,
};
export default accidentService;
View:
import "./ReportTable.css";
import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getAccidents } from "../../Features/accidentReport/accidentSlice";
const ReportTable = () => {
const dispatch = useDispatch();
const { accidents, isLoading, isError, message } = useSelector(
(state) => state.accident
);
useEffect(() => {
dispatch(getAccidents());
}, [dispatch, getAccidents]);
console.log(accidents._id);
return (
<>
<section>
{accidents.length > 0 ? (
<div>
{accidents.map((accident) => (
<p key={accident._id}>{accident._id}</p>
))}
</div>
) : (
<h3>You have no accidents </h3>
)}
</section>
</>
);
};
export default ReportTable;