initialData is null in livewire component when there is a two events in the same component - laravel

Question

I am having two events in my component one is changing the layout and another one is sorting. Changing a layout basically it only replace a layout component inside a parent component. Now when i am calling a sorting then livewire giving me a error 'initialdata is null '.
I am looking for to create a sorting order with this same component. And my code is
<div class="dropdown px-2 d-none d-lg-block">
<div class=" text-dark fw-bold dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="px-1">
<img class="" src="{{ Vite::image('icons/classic.png') }}" alt="" />
</span>
<span>
<img class="" src="{{ Vite::image('icons/filter-down.png') }}" alt="" />
</span>
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item text-primary #if($show == 1)text-primary #else text-dark #endif fw-bolder" href="javascript:void(0)" wire:click="$set('show', '1')">
<img src="{{ Vite::image('icons/compact.png') }}" alt="" class="ps-2" /> Card </a>
<a class="dropdown-item uni-border #if($show == 2)text-primary #else text-dark #endif fw-bolder " href="javascript:void(0)" wire:click="$set('show', '2')">
<img src="{{ Vite::image('icons/classic.png') }}" alt`your text`="" class="ps-2" />Classic </a>
<a class="dropdown-item uni-border #if($show == 3) text-primary #else text-dark #endif fw-bolder" href="javascript:void(0)" wire:click="$set('show', '3')">
<img src="{{ Vite::image('icons/com.png') }}" alt="" class="ps-2" />Compact </a>
</div>
</div>
{{-- sorting option --}}
<div class="d-flex justify-content-between pt-2 align-items-center d-none d-lg-block ">
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="m-0">Selected Filters:</span>
<span class=" mx-3 boat-span2 align-items-center rounded-1">
<span>$500 </span>
<span>
<img src="{{ Vite::image('icons/cross.png') }}" alt="" class="" />
</span>
</span>
<span class=" boat-span2 align-items-center rounded-1">
<span> Skipper </span>
<span>
<img src="{{ Vite::image('icons/cross.png') }}" alt="" class="" />
</span>
</span>
</div>
<div class="">
<h6 class="m-0 text-secondary fw-500 ">
<u> Clear Filters</u>
</h6>
</div>
</div>
</div>
#if($show == 2)
{{-- classic layout --}}
#livewire('frontend.boat.listing.layout.classic',['product' => $product])
#elseif($show == 1)
{{-- card layout --}}
#livewire('frontend.boat.listing.layout.card',['product' => $product])
#elseif($show == 3)
{{-- compact layout --}}
#livewire('frontend.boat.listing.layout.compact',['product' => $product])
#endif
</div>
<?php
namespace App\Http\Livewire\Frontend\Boat\Listing;
use App\Models\Product;
use Livewire\Component;
class Listing extends Component
{
// Mount , boot , hydrate component
public $filter_option_recommend = "recommended";
public $show = "2";
// public $filter_option = "name";
// public $product;
public function detail($id, $title)
{
return redirect()->route('website.boat.detail', [$id, $title]);
}
public function render()
{
$product = Product::join('product_time_assign', 'product_time_assign.product_id', '=', 'products.id')
->where([
'products.type_id' => 1, // boat
'products.status' => 'Active',
])
->select(
'products.id as productid',
'product_time_assign.id as timeassignid',
'products.name',
'products.capacity',
'products.price_starts',
'product_time_assign.skipper',
'product_time_assign.product_time_assign_id',
'products.review_rating',
'products.image',
'products.description',
'products.discount_price'
)
->orderBy($this->filter_option_recommend, 'asc')->get();
return view('livewire.frontend.boat.listing.listing', ['product' => $product]);
}
}