How to read values by foreign key - reactjs

Question

I'm fairly new to Laravel and React. I have 3 tables called students, users and projects. Each project has 1 student, 1 supervisor and 2 examiners (supervisors and examiners are users) assigned to it. I want to try to fetch the names of the student and user from the respective tables and display them.
My Project.php
protected $with =['projectStudent', 'projectSupervisor', 'projectExaminer1', 'projectExaminer2'];
public function projectStudent()
{
return $this->belongsTo('App\Models\Student', 'student_id', 'student_id');
}
public function projectSupervisor()
{
return $this->belongsTo('App\Models\User', 'supervisor_id', 'id');
}
public function projectExaminer1()
{
return $this->belongsTo('App\Models\User', 'examiner1_id', 'id');
}
public function projectExaminer2()
{
return $this->belongsTo('App\Models\User', 'examiner2_id', 'id');
}
My ProjectController.php
public function index()
{
return ProjectResource::collection(
Project::query()->with('projectStudent')->orderBy('id', 'desc')->paginate(5)
);
}
My Projects.jsx
const [projects, setProjects] = useState([]);
const [paginate, setPaginate] = useState(1);
const [loading, setLoading] = useState(false);
const {setNotification} = useStateContext();
useEffect(() => {
getProjects();
}, [paginate])
const handlePaginate = (direction) => {
setPaginate(prevPage => prevPage + direction)
}
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
const getProjects = () => {
setLoading(true);
axiosClient.get(`/projects?page=${paginate}`)
.then(({data}) => {
setLoading(false);
setProjects(data.data);
})
.catch(() => {
setLoading(false);
})
}
I want to get name of the student and the names of supervisor and examiner but project.projectStudent.name returns undefined.
When I try to console.log(JSON.stringify(data.data, null, 2)) the data, I get
[
{
"id": 1,
"title": "Stock Market Prediction",
"student_id": "SW0102469",
"supervisor_id": 18,
"examiner1_id": 12,
"examiner2_id": 33
}
]
And this is my projectResource.php
<?php
namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;
class ProjectResource extends JsonResource
{
public static $wrap = false;
/**
* Transform the resource into an array.
*
* #param \Illuminate\Http\Request $request
* #return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
*/
public function toArray($request)
{
return [
'id' => $this->id,
'title' => $this->title,
'student_id' => $this->student_id,
'supervisor_id' => $this->supervisor_id,
'examiner1_id' => $this->examiner1_id,
'examiner2_id' => $this->examiner2_id,
// 'start_date' => $this->start_date->format('Y-m-d'),
// 'end_date' => $this->end_date->format('Y-m-d'),
// 'duration' => $this->duration,
// 'status' => $this->status,
];
}
}