Why is the DataTable turns to normal table when clicking/calling another function?

I used Bootstrap DataTable in my Laravel-Livewire project. I noticed that when I click another function (Add, Edit, Delete, Store, Open a modal and etc.) the DataTable turns into a normal table.

This is how I implemented it in my script.

<script>


    $(document).ready(function() {
        $('#clientTypeTable').DataTable();
    } );

    window.livewire.on('closeClientTypeModal', () => {
        $('#clientTypeModal').modal('hide');
    });

    window.livewire.on('openClientTypeModal', () => {
        $('#clientTypeModal').modal('show');
    });


    window.addEventListener('swal:confirmClientTypeDelete', event => {
        swal.fire({
            title: event.detail.title,
            text: event.detail.text,
            icon: event.detail.icon,
            showCancelButton: event.detail.showCancelButton,
            confirmButtonColor: event.detail.confirmButtonColor,
            cancelButtonColor: event.detail.cancelButtonColor,
            confirmButtonText: event.detail.confirmButtonText,
        }).then((result) => {
        if (result.isConfirmed) {
            window.livewire.emit('deleteClientType',event.detail.id)
            swal.fire(
            'Deleted!',
            'Your file has been deleted.',
            'success'
            )
        }
        });
    });

    //

</script>