Laravel Vue Inertia delete confirm returning modal with "1" value

I am having trouble with the delete function for my table items. It keeps returning a modal with a value of 1. I have tried many possible solutions I found online, but I still have no luck. Could you please help? Thank you in advance.

Controller:

public function destroy($id) {
        $articleCategories = ArticleCategory::findOrFail($id);
$articleCategories->delete();
return redirect()->route('article_categories')->with('message', 'Article category deleted successfully.');
}

Vue:

<script>
import Title from "../Layouts/Components/Title.vue";
import PaginationLinks from "../../components/PaginationLinks.vue";
import TableEditButton from "../../components/TableEditButton.vue";
import { router, useForm } from "@inertiajs/vue3";
import { ref, watch } from "vue";
const form = useForm({});
const props = defineProps({
articleCategories: Object,
});
function destroy(id) {
if (confirm("Are you sure you want to delete this record?")) {
form.delete(route("article_categories.destroy", { id }), {
preserveScroll: true,
});
}
}
</script>
<template>
<tbody>
<tr v-for="articleCategories in articleCategories.data" :key="articleCategories.id">
<td>{{ articleCategories.title }}</td>
<td>
<div class="flex gap-2 justify-end">
<TableEditButton
:href="route('article_categories.edit', articleCategories.id)"
/>
<Link href="#" @click="destroy(articleCategories.id)">
Delete
</Link>
</div>
</td>
</tr>
</tbody>
</template>