Eloquent Model not joining tables in the right order

I am trying to join 2 tables (staff and hr_validations) and then return the result to my vuejs app to display.
My Eloquent Model:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\hr_validation;

class hrvalidationController extends Controller
{
    public function getStaffLoans()
    {
        $loan = hr_validation::join('staff','staff.staff_id','=','hr_validations.staff_id_fk')->where('hr_validations.validate',NULL);
        $date = $loan->pluck('hr_validations.created_at');
        $name= $loan->pluck('staff.staff_name');
        return([$loan->pluck('staff_id_fk'), $loan->pluck('loan_amount'), $loan->pluck('loan_tenor'), $loan->pluck('loan_purpose'), $loan->pluck('description'), $date, $loan->pluck('hr_validations.id'), $name]);   
    }

hr_validations table:

Staff table:

The problem is the way the Eloquent Model populates the staff_name column in the result it sends to my VueJS app. It just populates it as it appears in the staff table rather than according to the staff_id_fk in the hr_validations table as show below when I iterate through the result in VueJS:

How can I rectify the Staff Name column such that it displays the right staff name for each staff code so that the staff name column below would display [ "Anthony Babatunde","John Jackson", "Anthony Babatunde" ] instead of what it is showing below:

Any help would be appreciated. Thanks!

via Chebli Mohamed