How to update the "date property" inside an alpine carousel?

Hi! I am building an announcement carousel with alpine. How to dynamically update the "date property" inside the carousel with each slide.

<div x-data="{
        currentIndex: 0,
        announcements: @js($announcements->map(fn($a) => [
            'id' => $a->id,
            'title' => $a->title,
            'description' => $a->announcement,
            'image' => asset('storage/2/hero1.jpg'),
            'date' => $a->created_at->format('M d, Y')
        ])),
        autoPlayInterval: null, 
        nextSlide() {
            this.currentIndex = (this.currentIndex + 1) % this.announcements.length;
        },
        prevSlide() {
            this.currentIndex = (this.currentIndex - 1 + this.announcements.length) % this.announcements.length;
        },
        autoPlay() {
            this.autoPlayInterval = setInterval(() => {
                this.nextSlide();
            }, 5000);
        },
        stopAutoPlay() {
            clearInterval(this.autoPlayInterval);
        },
        resumeAutoPlay() {
            this.autoPlay();
        }
    }"
    x-init="autoPlay()"
    class="relative rounded-lg bg-white p-2 py-5"
    @mouseenter="stopAutoPlay()" 
    @mouseleave="resumeAutoPlay()"
>
    <!-- Announcement Slides -->
    <div class="relative">
        <template x-for="(announcement, index) in announcements" :key="announcement.id">
            <div 
                x-show="currentIndex === index" 
                x-transition:enter="transition ease-in-out transform duration-500"
                x-transition:enter-start="translate-x-full opacity-0"
                x-transition:enter-end="translate-x-0 opacity-100"
                x-transition:leave="transition ease-in-out transform duration-500"
                x-transition:leave-start="translate-x-0 opacity-100"
                x-transition:leave-end="translate-x-full opacity-0"
                class="border-b-2 p-2"
            >
                <div class="flex justify-between p-2">
                    <div class="flex items-center">
                        <div class="flex items-center space-x-1 px-2 py-1 bg-yellow-400">
                            <h2 class="text-xl font-bold">Notice</h2>
                            <h4 x-text="announcement.date"></h4> 
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <!-- Left Arrow -->
                        <button @click="prevSlide()" class="size-5 cursor-pointer">
                            <x-icon name="arrow-long-left" solid />
                        </button>
                        <!-- Right Arrow -->
                        <button @click="nextSlide()" class="size-5 cursor-pointer">
                            <x-icon name="arrow-long-right" solid />
                        </button>
                    </div>
                </div>

                <a :href="'/announcement/' + announcement.id">
                    <div class="p-2 grid lg:grid-cols-12">
                        <div class="lg:col-span-4 p-2">
                            <img :src="announcement.image" alt="Announcement Image" class="w-full rounded-lg">
                        </div>
                        <div class="lg:col-span-8 p-4 space-y-2">
                            <div class="text-center">
                                <div class="text-center font-bold" x-text="announcement.title"></div>
                                <div class="text-xs mt-1" x-text="announcement.date"></div> 
                            </div>
                            <div class="text-wrap" x-text="announcement.description"></div>
                        </div>
                    </div>
                </a>
            </div>
        </template>
    </div>
</div>