Livewire encountered corrupt data when trying to hydrate the component issue

Question

I am getting the following error and am a bit lost on it:

Livewire encountered corrupt data when trying to hydrate the [messaging] component. Ensure 
that the [name, id, data] of the Livewire component wasn't tampered with between requests.

I am laravel developer and i have no experience with live wire but i am trying to develope a chat room using live wire but when i click to user for opening to related chat but i will get error https://flareapp.io/share/17xnLnbm please help me how can i resolved that ? thank u. It is occuring when clicking an element.

          @foreach ($conservation as $conservations)
              <a href="#"  wire:click.prevent="viewMessages({{ 
             $conservations->id}} )">
                <div class="user-card rounded bg-dark bg-opacity-10 mb-1">
                  <div class="mx-2">
                    <div class="d-flex pt-3">
                      <img class="rounded-circle" width="48px" height="48px" src="{{Config('wfh.file').$conservations->reciever->avator}}" alt="">
                      <div class="notification-text ms-3 w-100">
                        <span class="username fw-bold">{{$conservations->reciever->full_name}}</span>
                        <span class="float-end small"></span>
                        <p class="mt-1 text-muted">You: </p>
                      </div>
                    </div>
                  </div>
                </div>
                </a>
           @endforeach

When i click any user for opening related to chat but unfortunately i am getting error.

app\Http\Livewire\Messaging.php

class Messaging extends Component
{
    public $body;

    public $selectedConservation;

    public function mount(){

        $this->selectedConservation = Conservation::query()
        ->where('sender_id',Auth::user()->id)
        ->orwhere('reciever_id',Auth::user()->id)
        ->first();
    }

    public function render()
    {

        $conservation = Conservation::query()
                ->where('sender_id',Auth::user()->id)
                ->orwhere('reciever_id',Auth::user()->id)
                ->get();

    return view('livewire.messaging',[

            'conservation' => $conservation,
        ]);
    }

    public function viewMessages($conservationsId){

        $this->selectedConservation = Conservation::findorFail($conservationsId);

    }

    public function sendMessages(){

        Message::create([
            'conservation_id'   =>   $this->selectedConservation->id,
            'user_id'           =>    Auth::user()->id,
            'body'              =>      $this->body
        ]);

        $this->reset('body');

        $this->viewMessages($this->selectedConservation->id);
    }

\views\livewire\messaging.blade.php

@extends('web.layouts.masterpage')

@section('title', 'Dashboard')

@section('top-styles')
<style>
    .bg-white {
    background-color: rgba(255,255,255,var(--mdb-bg-opacity))!important;
    display: none;
}
</style>
@endsection

@section('header')
  @parent
@endsection

@section('leftside')
  @parent
@endsection
@section('content')


    <div class="container-fluid content">
    <div class="row">
      <div class="col-md-12 mb-4">
        <h2 class="fw-bold">Messaging</h2>
      </div>
    </div>
    <div class="row message-container">
      <div class="col-md-9 h-100">
        <div class="card h-100">
          <div class="row h-100">
            <div class="col-md-4 border-end pt-3 ps-4">
              <div class="d-flex mb-3">
                <div class="input-group me-3 search-bar">
                  <span class="input-group-text border-0" id="search-addon"><i class="fas fa-search"></i></span>
                  <input
                    type="search"
                    class="form-control rounded"
                    placeholder="Search"
                    aria-label="Search"
                    aria-describedby="search-addon"
                  />
                </div>
                <button class="btn bg-white me-2 p-2"><i class='bx bx-dots-horizontal-rounded fs-5' ></i></button>
                <button class="btn bg-white p-2"><i class='bx bxs-edit fs-5'></i></button>
              </div>
              @foreach ($conservation as $conservations)
              <a href="#"  wire:click.prevent="viewMessages({{ $conservations->id}} )">
                <div class="user-card rounded bg-dark bg-opacity-10 mb-1">
                  <div class="mx-2">
                    <div class="d-flex pt-3">
                      <img class="rounded-circle" width="48px" height="48px" src="{{Config('wfh.file').$conservations->reciever->avator}}" alt="">
                      <div class="notification-text ms-3 w-100">
                        <span class="username fw-bold">{{$conservations->reciever->full_name}}</span>
                        <span class="float-end small"></span>
                        <p class="mt-1 text-muted">You: </p>
                      </div>
                    </div>
                  </div>
                </div>
                </a>
              @endforeach
            </div>

            <div class="col-md-8 ps-0 position-relative">
              <div class="user-card-header border-bottom p-3">
                <div class="d-flex align-items-center">
                  <img class="rounded-circle" width="32px" height="32px" src="" alt="">
                  <div class="ms-3 w-100 d-flex justify-content-between align-items-center">
                    <span class="username fw-bold">
                        @if ($conservations->sender_id === Auth::user()->id)
                            {{ $selectedConservation->reciever->full_name }}
                         @else
                            {{ $selectedConservation->sender->full_name }}
                         @endif
                        </span>
                    <div class="dropdown">
                      <button class="btn bg-white p-1 lh-1 fs-4" type="button" id="dropdownMenu2"
                        data-mdb-toggle="dropdown" aria-expanded="false">
                        <i class='bx bx-dots-horizontal-rounded'></i>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                        <li><button class="dropdown-item" type="button">Action</button></li>
                        <li><button class="dropdown-item" type="button">Another action</button></li>
                        <li><button class="dropdown-item" type="button">Something else here</button></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              @foreach($selectedConservation->messages as $message)
              <div class="message-area p-3">
                <div class="date border-bottom text-center my-3"><span class="bg-white px-3">{{$message->created_at->format('d-m-Y') }}</span></div>
                <div class="d-flex">
                  <img class="rounded-circle" width="24px" height="24px" src="{{Config('wfh.file').$message->user->avator}}" alt="">
                  <div class="message-text ms-3">
                    <div>{{$message->body}}</div>
                  </div>
                </div>

              </div>
              @endforeach
              <form wire:submit.prevent="sendMessages" action="#">
                <div class="position-absolute bottom-0 col-md-12 pe-3">
                    <div class="input-group comment-box p-3">
                    <input wire:model.defer="body" type="text" class="form-control" placeholder="Aa" aria-label="Aa" aria-describedby="button-addon2">
                    <button class="btn btn-outline-secondary py-0 px-3" type="submit" id="button-addon2"><i class='bx bx-send fs-4'></i></button>
                    </div>
                </div>
            </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('bottom-mid-scripts')

@endsection
@section('bottom-bot-scripts')

@endsection