Trying to get property 'nama_makanan' of non-object

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class makanan extends Model
{
    protected $table = "makanan";
    protected $primaryKey = "id";
    protected $fillable = [
        'id','nama_makanan','jenis_makanan','harga'];

    public function transaksi(){
        return $this->hasMany(transaksi::class,'id');
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class transaksi extends Model
{
    protected $table = "tb_transaksi";
    protected $primaryKey = "kode_transaksi";
    protected $fillable = [
        'kode_transaksi','tanggal_transaksi','kode_paket','kode_promo','kode_makanan','kode_minuman','total_harga','id_event'];

    public function makanan(){
        return $this->belongsTo(makanan::class);
    }
}

transaksi Controller

    public function tampil(){

        $transaksi = transaksi::with('makanan')->simplePaginate(5);
        return view('pembeli.pembeli',compact('transaksi'));

    }

@extends('layout.page')

@section('title')
    <h1>Data Pembeli</h1>
@endsection

@section('content')

<div class="card card-info card-outline"><br>
<div class="btn_tambah">
<table class="">
    <td>
        <a href="/inputpembeli"><button type="button" class="btn btn-block btn-primary btn_tambah">Tambah</button></a>
    </td>
    <td></td>
    <td></td>
</table>
</div>

    <div class="card-body">
        <table id="tabel_pembeli" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th scope="col">Kode Transaksi</th>
                <th scope="col">Tanggal Transaksi</th>
                <th scope="col">Paket</th>
                <th scope="col">Kode Promo</th>
                <th scope="col">Makanan</th>
                <th scope="col">Minuman</th>
                <th scope="col">Total</th>
                <th scope="col">Event</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($transaksi as $p)
            <tr>
                <td>{{ $p->kode_transaksi }}</td>
                <td>{{ $p->tanggal_transaksi }}</td>
                <td>{{ $p->kode_paket }}</td>
                <td>{{ $p->kode_promo }}</td>
                <td>{{ $p->makanan->nama_makanan}}</td>
                <td>{{ $p->kode_minuman }}</td>
                <td>{{ $p->total_harga }}</td>
                <td>{{ $p->id_event }}</td>
                <td>
                    <a href="/promo/edit/{{ $p->kode_promo }}"><i class="fa" style="color:green">Edit</i></a> |
                    <a href="/promo/hapus/{{ $p->kode_promo }}"><i class="fa" style="color :red">Hapus</i></a>
                </td>
                @endforeach
            </tr>
        </tbody>
        </table>
        <br>
        <div class="card-footer">
            {{ $transaksi->links() }}
        </div>
    </div>

@endsection