Laravel Error: Trying to get property of non-object (OneToMany Relationship)

I am experiencing this error Trying to get property of non-object. I have two models and a Livewire component.

the models are Staffrecord and Loanassignment

This how I defined their relationship:

**Staffrecord Model Relationship**

  public function loans()
    {
        return $this->hasMany(Loanassignment::class, 'staff_id');
    }
**Loanassignment Model Retionship**

   public function staff()
    {
        return $this->belongsTo(Staffrecord::class,  'staff_id');
    }


**LIVEWIRE CLASS**

Inside the live wire class, I have set the staff ID so that I can get staff and assign a loan to him or here. however i have been experiencing a lot of issues.

   public $staff;
   public $staff_id = 'ST-001';
//store method for Loan Assignment

    public function store()
    {

        $validatedData = $this->validate([
            'loan_amount' => 'required',
            'loan_date' => 'required|date',
            'loan_type_id' => 'required',
            'repayment_start_date' => 'required|date|after:' . Carbon::create($this->loan_date)->addMonths(1)->subDay(),
            'repayment_end_date' => 'required|date|after:repayment_start_date',
        ]);


        $this->staff->loans()->create($validatedData);

        session()->flash('message', 'Loan assignment created successfully!');
        $this->resetInputFields();
        $this->emit('loanAssignmentAdded');
    }

   public function render()
    {
        $this->staff = Staffrecord::with('loans')->where('staff_id', "=", $this->staff_id)->first();


        
        return view('livewire.staff-account-payslip');
    }
LIVEWIRE VIEW

 @foreach ($staff->loans as $loan)
                                <tr>
                                    <td> Loan</td>
                                    <td>{{ $loan->loan_amount }}</td>
                                </tr>
                            @endforeach

WHEN I dd($this->staff)
App\Models\Staffrecord {#1545 ▼
  #table: "staffrecords"
  #primaryKey: "staff_id"
  +incrementing: false
  #guarded: []
  #connection: "mysql"
  #keyType: "int"
  #with: []
  #withCount: []
  #perPage: 15
  +exists: true
  +wasRecentlyCreated: false
  #attributes: array:12 [▼
    "id" => 20
    "staff_id" => "ST-001"
    "first_name" => "SESUGH"
    "middle_name" => "Gabriel"
    "last_name" => "ABENGA"
    "designation" => "Admin"
    "grade_level_id" => 4
    "phone_number" => 8066604542
    "email" => "[email protected]"
    "address" => "no 31 libreville street wuse 2"
    "created_at" => "2021-02-10 01:29:19"
    "updated_at" => "2021-02-10 01:29:19"
  ]
  #original: array:12 [▼
    "id" => 20
    "staff_id" => "ST-001"
    "first_name" => "SESUGH"
    "middle_name" => "Gabriel"
    "last_name" => "ABENGA"
    "designation" => "Admin"
    "grade_level_id" => 4
    "phone_number" => 8066604542
    "email" => "[email protected]"
    "address" => "no 31 libreville street wuse 2"
    "created_at" => "2021-02-10 01:29:19"
    "updated_at" => "2021-02-10 01:29:19"
  ]
  #changes: []
  #casts: []
  #classCastCache: []
  #dates: []
  #dateFormat: null
  #appends: []
  #dispatchesEvents: []
  #observables: []
  #relations: array:1 [▼
    "loans" => Illuminate\Database\Eloquent\Collection {#1563 ▼
      #items: array:13 [▼
        0 => App\Models\Loanassignment {#1567 ▼
          #table: "loanassignments"
          #fillable: array:6 [▶]
          #connection: "mysql"
          #primaryKey: "id"
          #keyType: "int"
          +incrementing: true
          #with: []
          #withCount: []
          #perPage: 15
          +exists: true
          +wasRecentlyCreated: false
          #attributes: array:10 [▼
            "id" => 43
            "staff_id" => "ST-001"
            "loan_amount" => 5000.0
            "loan_date" => "2020-12-04"
            "status" => "active"
            "loan_type_id" => 1
            "repayment_start_date" => "2021-02-01"
            "repayment_end_date" => "2021-06-17"
            "created_at" => "2021-02-12 02:28:12"
            "updated_at" => "2021-02-12 02:28:12"
          ]
          #original: array:10 [▶]
          #changes: []
          #casts: []
          #classCastCache: []
          #dates: []
          #dateFormat: null
          #appends: []
          #dispatchesEvents: []
          #observables: []
          #relations: []
          #touches: []
          +timestamps: true
          #hidden: []
          #visible: []
          #guarded: array:1 [▶]
        }
        1 => App\Models\Loanassignment {#1568 ▶}
        2 => App\Models\Loanassignment {#1569 ▶}
        3 => App\Models\Loanassignment {#1570 ▶}
        4 => App\Models\Loanassignment {#1571 ▶}
        5 => App\Models\Loanassignment {#1572 ▶}
        6 => App\Models\Loanassignment {#1573 ▶}
        7 => App\Models\Loanassignment {#1574 ▶}
        8 => App\Models\Loanassignment {#1575 ▶}
        9 => App\Models\Loanassignment {#1576 ▶}
        10 => App\Models\Loanassignment {#1577 ▶}
        11 => App\Models\Loanassignment {#1578 ▶}
        12 => App\Models\Loanassignment {#1580 ▶}
      ]
    }
  ]
  #touches: []
  +timestamps: true
  #hidden: []
  #visible: []
  #fillable: []
}

I don’t know what I am doing wrong kindly assist