how to re-initialize DataTable inside the Javascript hooks?

How to re-initialize the DataTable using Javascript hooks?

I tried this but have an error DataTables warning: table id=rolesTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

This is my script

document.addEventListener("DOMContentLoaded", () => {
        Livewire.hook('component.initialized', (component) => {
            $('#rolesTable').DataTable({
                "pagingType": "full_numbers",
            });
        })
        Livewire.hook('element.initialized', (el, component) => {
            $('#rolesTable').DataTable({
                "pagingType": "full_numbers",
            });
        })
        Livewire.hook('element.updating', (fromEl, toEl, component) => {
            $('#rolesTable').DataTable({
                "pagingType": "full_numbers",
            });
        })
        Livewire.hook('element.updated', (el, component) => {
            $('#rolesTable').DataTable({
                "pagingType": "full_numbers",
            });
        })
});