Can't paginate in livewire component

Question

I'm trying to paginate items in a livewire component, I have this query

protected $listeners = [
  'franchises:coords' => 'getFranchises'
];

public $franchiseList;

public function getFranchises($coords)
{
    if ($coords) {
        $latitude = json_decode($coords)[0];
        $longitude = json_decode($coords)[1];
        $radiusInMeters = 800;

        $this->franchiseList = Franchise::select(DB::raw('*, ( 6371000 * acos( cos( radians(' . $latitude . ') )
        * cos( radians( latitude ) ) * cos( radians( longitude ) - radians(' . $longitude . ') )
        + sin( radians(' . $latitude . ') ) * sin( radians( latitude ) ) ) ) AS distance'))
            ->having('distance', '<', $radiusInMeters)
            ->orderBy('distance')
            ->paginate(8);
    }
}

the component is included in my "maps.blade"

            <div class="lg:basis-1/4 md:basis-1/4 sm:px-6 lg:px-8">
                <livewire:franchise-list/>
            </div>

and in my blade view, I have this

            @if(!empty($franchiseList))
                {{$franchiseList->links()}}
            @endif

but I get this error

Livewire component's [franchise-list] public property [franchiseList] must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them.

If I try to change pagination by adding these lines to the getFranchises function and adding $links to public

public $franchiseList, $links;

        //after paginate
        $this->links = $this->franchiseList;
        $this->franchiseList = collect($this->franchiseList->items);

and in the blade change to this

            @if(!empty($franchiseList) && $links->links())
                {{$links->links()}}
            @endif

I get this error

Error Cannot access protected property Illuminate\Pagination\LengthAwarePaginator::$items

How can I paginate in livewire? where is the problem?