Alpine Triggers All Dropdown Inside Blade Loop

I'm trying to make AlpineJS target the right elements within the blade loop. Here's how the overall structure looks like; which works when the loop has just one element; but fails when loop has 2 or more elements. -

<div x-data="dropDownController()">
@foreach($items as $item)
	@include('app._partials.dropDownButton')
@endforeach
</div>

<script>
function dropDownController() {
return {
 isDropDownOpen: false
toggle() {
 this.isDropDownOpen = !this.isDropDownOpen;
}
}
}
</script>

Note: I've offered a very simplified version of the alpine controller and overall HTML I have in place to offer an overview of the problem.

I can fix this by initialising alpine on individual components inside the loop. However, I'm curious to know if there's a ny quicker way to fix this so that alpine only works on the current element being clicked.