Commented old comments value remaining at textarea after submit .
livewire3 ,filemant3 and laravel10 laravel blog I want to clear the text area after submmited the comment .
the text area input box is not rendering again after submited.

CommentCreate.php ( livewire component)

<?php
namespace AppLivewire;

use AppModelsPost;
use AppModelsComment;
use LivewireComponent;
use IlluminateSupportFacadesAuth;

class CommentCreate extends Component
{
    public Post $post;
    public string $comment = '';

    public function mount(Post $post)
    {
        $this->post = $post;
    }

    public function render()
    {
        return view('livewire.comment-create');
    }

    public function createComment()
    {
        $user = auth()->user();
        if (!$user) {
            return $this->redirect('/login');
        }

        $comment = Comment::create([
            'comment' => $this->comment,
            'post_id' => $this->post->id,
            'user_id' => $user->id,
        ]);

        // Emit event to notify other components
        $this->dispatch('commentCreated', id: $comment->id);

        $this->comment =''; 
    }
}

Comments.php

<?php

namespace AppLivewire;

use AppModelsPost;
use AppModelsComment;
use LivewireComponent;
use IlluminateDatabaseEloquentCollection;

class Comments extends Component
{
    public $comments;
    public Post $post;
    
    protected $listeners = [
        'commentCreated' => 'commentCreated',
    ];

    public function mount(Post $post)
    {
        $this->post = $post;
        $this->comments = Comment::where('post_id', $this->post->id)
                                 ->orderByDesc('created_at')
                                 ->get();
    }

    public function render()
    {
        return view('livewire.comments');
    }

    public function commentCreated(int $id)
    {
        $latest_comment = Comment::find($id);
        if ($latest_comment) {
            $this->comments->prepend($latest_comment);
        }
    }
}

CommentItem.php

<?php

namespace AppLivewire;

use AppModelsComment;
use LivewireComponent;

class CommentItem extends Component
{
    public Comment $comment;
    public function mount(Comment $comment){
        $this->comment = $comment;
    }
    public function render()
    {
        return view('livewire.comment-item');
    }
}

comment-create.blade.php

<div class="mb-4">
    <div x-data="{
                    focused: false,
                    init(){
                        window.addEventListener('commentCreated', () => {
                            this.focused = false;
                            $wire.set('comment', ''); // Clear the comment field
                        });
                    }
                }"
        >
        <div class="mb-2">
            <textarea
                x-ref="input" wire:model="comment" @click="focused = true"
                class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                :rows="focused ? '2' : '1'"
                placeholder="Leave a comment"
            ></textarea>
        </div>
        <div :class="focused ? '' : 'hidden'">
            <button wire:click="createComment" type="button"
                class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
                Submit
            </button>
            <button @click="focused = false" type="button" class="">
                Cancel
            </button>
        </div>
    </div>
</div>

comments.blade.php

<div class="mt-6">
    <livewire:comment-create :post="$post"/>

    @foreach ($comments as $comment)
        <livewire:comment-item :comment="$comment" wire:key="comment-{{ $comment->id }}"/>
    @endforeach
</div>

comments-item.blade.php

<div>
    {{-- Do your work, then step back. --}}
    <div class="flex mb-3 gap-3">
        <div class="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-full ">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
            </svg>
        </div>
        <div>
            <div >
                <a class="font-semibold text-indigo-600" href="">
                    {{$comment->user->name}}
                </a>
                - <span class="text-gray-500">{{$comment->created_at->diffForHumans()}}</span>
            </div>
            <div class="text-gray-700">
                {{$comment->comment}}
            </div>
            <div>
                <a href="#" class="text-indigo-600 mr-3">Reply</a>
                {{-- @dd(IlluminateSupportFacadesAuth::id()); --}}
                @if(IlluminateSupportFacadesAuth::id() == $comment->user_id)
                    <a href="#"class="text-blue-600 mr-3">Edit</a>
                    <a href="#" class="text-red-600">Delete</a>
                @endif
            </div>
        </div>

    </div>
</div>

$this->dispatch('commentCreated', id: $comment->id);
$this->comment = ''; 

I reset the comment as a empty string but its not render on the 
<textarea
                x-ref="input" wire:model="comment" @click="focused = true"
                class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                :rows="focused ? '2' : '1'"
                placeholder="Leave a comment"
            >
</textarea>