AlpineJS x-for showing an extra iteration - laravel

Question

Having a strange issue, when using x-for to loop through an array i am getting an additional blank set of form elements. If i take out all of the code between the templates and just replace with a h1 with x-text as event.name - i only get the 2 iterations.
Puling my hair out, any ideas why this might be occuring? Here is the code.
Appreciate your assistance.
I have confirmed that the array being passed in only has 2 entries.
<div x-data="updateEvent()">
<template x-for="event in events">
<form action="test10" #submit.prevent="submitData">
<div class="grid grid-cols-4 gap 4 flex">
<div>
</div>
<div class="flex items-center content-center justify-center py-5">
<img class="w-full rounded" :src="imagePath + event.image" alt="" />
</div>
<div>
<div class="pl-4 my-10">
<div>
<x-label for="name" :value="__('Name')" class="mb-2" />
<x-input id="name" class="block mt-1 w-full" type="text" name="name"
::value="" x-model="event.name" x-bind:disabled="!disabled" required
autofocus />
</div>
<div>
<x-label for="date" :value="__('Date')" />
<x-input id="date" class="block mt-1 w-full" type="text" name="date"
::value="" x-model="event.date" required autofocus />
</div>
<div>
<x-label for="statsLink" :value="__('Stats Link')" />
<x-input id="statsLink" class="block mt-1 w-full" type="text"
name="statsLink" ::value="" x-model="event.statsLink" required
autofocus />
</div>
<div>
<x-label for="frontLink" :value="__('Front Link')" />
<x-input id="frontLink" class="block mt-1 w-full" type="text"
name="frontLink" ::value="" x-model="event.frontLink" required
autofocus />
</div>
</div>
</div>
<div class="flex items-center content-center justify-center ">
<x-button class="ml-3" x-on:click="disabled = !disabled, save = !save">
Edit Event
</x-button>
<br />
<x-button class="ml-3" x-bind:disabled="!disabled">
Update Event
</x-button>
</div>
</div>
</form>
</template>
</div>
I have tried cutting down the code to H1 and then it seems to iterate correctly - only twice.
Adding in the updateEvent() code for reference.
`<script>
function updateEvent() {
return {
events: [{
id: 1,
name: 'Event Name 1',
date: '2023-02-11 00:00:00',
image: '/eventCoverImages/EventCoverImage1.jpg',
cards: null
},
{
id: 2,
name: 'Event Name 2',
date: '2023-01-14 00:00:00',
image: '/eventCoverImages/EventCoverImage2.jpg',
cards: null
}
],
show: true,
disabled: false,
save: true,
imagePath: "{{ asset('app') . '/' }}",
}
}
`