Laravel Livewire chat Messages do not push upwards when new chat message comes in - laravel

Question

I am developing A laravel Livewire chat. I am able to create new chats but the does not push up the previous message. Instead, it remains invisible behind the chat box. When a pusher message comes in, the chat message div remains at its original position.
Here is my mobile.blade.php
<div class="chatArea changeW" wire:poll>
<div class="chatMessages">
#foreach($messagesByDay as $day=>$messages)
<p class="timeId">
#if($day == date('Y-m-d'))
Today
#else
{{$day}}
#endif
</p>
#foreach($messages as $message)
#if($message->from_id != auth()->user()->id)
{{-- youra --}}
<div class="message">
<div class="prof">
<p><img src="{{$user->avatar()}}" style="width:30px"></p>
</div>
<div class="messArea">
<div class="textM">{{$message->body}}</div>
<p id="sname">{{$user->name}}</p>
</div>
</div>
{{-- yuors --}}
#else
{{-- mine --}}
<div class="message mMess 1122334" data-number="1122334">
<div class="messArea">
<div class="textM">{{$message->body}}</div>
</div>
<div class="prof">
<p><img src="{{auth()->user()->avatar()}}" style="width:30px"></p>
</div>
</div>
#endif
#endforeach
#endforeach
<!--End of Chat cont-->
</div>
#livewire('chat.messages.mobile.create',['user'=>$user])
</div>
This is the code at create.blade.php
<div class="messageBox">
<div wire:loading>
sending...
</div>
<div class="textA"><textarea id="message" wire:model.lazy="body" rows="1" cols="30"
placeholder="Type your message here"></textarea></div>
<button wire:click.prevent="save({{$user}})" id="send" class="button-s1" tooltip="Send" flow="left"><span class="material-icons headerIcon"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send"
viewBox="0 0 16 16">
<path
d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
</svg></span></button>
</div>
My Code at Messages.blade.php
<div class="chat-conversation p-3 p-lg-4" data-simplebar="init">
<ul class="list-unstyled mb-0" wire:poll>
#foreach($messagesByDay as $day=>$messages)
<li>
<div class="chat-day-title">
<span class="title">
#if($day == date('Y-m-d'))
Today
#else
{{$day}}
#endif
</span>
</div>
</li>
#foreach($messages as $message)
#if($message->from_id == auth()->user()->id)
<li class="right">
<div class="conversation-list">
<div class="chat-avatar">
<img src="{{$message->from->avatar()}}" alt="">
</div>
<div class="user-chat-content">
<div class="ctext-wrap">
<div class="ctext-wrap-content">
<p class="mb-0">
{{$message->body}}
</p>
<p class="chat-time mb-0">
<i class="ri-time-line align-middle"></i>
<span class="align-middle">{{date('H:i A',strtotime($message->created_at))}}</span>
</p>
</div>
<div class="dropdown align-self-start">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy
<i class="ri-file-copy-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Save
<i class="ri-save-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Forward
<i class="ri-chat-forward-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Delete
<i class="ri-delete-bin-line float-end text-muted"></i>
</a>
</div>
</div>
</div>
<div class="conversation-name">{{$message->from->name}}</div>
</div>
</div>
</li>
#else
<li>
<div class="conversation-list">
<div class="chat-avatar">
<img src="{{$user->avatar()}}" alt="">
</div>
<div class="user-chat-content">
<div class="ctext-wrap">
<div class="ctext-wrap-content">
<p class="mb-0">
{{$message->body}}
</p>
<p class="chat-time mb-0">
<i class="ri-time-line align-middle"></i>
<span class="align-middle">{{date('H:i A',strtotime($message->created_at))}}</span>
</p>
</div>
<div class="dropdown align-self-start">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy
<i class="ri-file-copy-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Save
<i class="ri-save-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Forward
<i class="ri-chat-forward-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Delete
<i class="ri-delete-bin-line float-end text-muted"></i>
</a>
</div>
</div>
</div>
<div class="conversation-name">{{$user->name}}</div>
</div>
</div>
</li>
#endif
#endforeach
#endforeach
</ul>
</div>