DataTable is not showing

This is my JavaScript code.

$(document).ready(function(){
            $(document).on('change', '#time', function () {
                time = $('#time').val();
                var url = '{{ route("owner.safety.timeOverview", ":time") }}';
                url = url.replace(':time', time);
                $('#overview').DataTable({
                    bDestroy: true,
                    processing: true,
                    serverSide: true,
                    pageLength: 100,
                    responsive: true,
                    ajax: {
                        url: url,
                        type: 'GET',
                        headers: {
                            'Accept': 'application/json'
                        },
                        success: function(response) {
                        console.log(response); // I am getting output here
                        },
                    },
                    order: [1, 'desc'],
                    ordering: false,
                    autoWidth: false,
                    drawCallback: function () {
                        $(".dataTables_length select").addClass("form-select form-select-sm");
                    },
                    language: {
                        'paginate': {
                            'previous': '<span class="iconify" data-icon="icons8:angle-left"></span>',
                            'next': '<span class="iconify" data-icon="icons8:angle-right"></span>'
                        }
                    },
                    columns: [
                        {
                            "data": "property_id",
                        },
                        {
                            "data": "unit_id",
                        },
                        {
                            "data": "issue_date",
                        },
                        {
                            "data": "expiry_date",
                        },
                        {
                            "data": "certified_by",
                        },
                        {
                            "data": "safety",
                        },
                        {
                            "data": "reminder",
                        },
                    ]
                });
            });
        });

My HTML is like this.

<div class="billing-center-area bg-off-white theme-border radius-4 p-25">
    <table id="overview" class="table responsive theme-border p-20 ">
        <thead>
            <tr>
                <th class="all">{{ __('Property') }}</th>
                <th class="all">{{ __('Unit') }}</th>
                <th class="all">{{ __('Issue Date') }}</th>
                <th class="all">{{ __('Expiry Date') }}</th>
                <th class="all">{{ __('Certified by') }}</th>
                <th class="all">{{ __('Safety Type') }}</th>
                <th class="all">{{ __('Status') }}</th>
            </tr>
        </thead>
    </table>
</div>  

Drop down HTML is like below.

<select id="time" class="form-select flex-shrink-0" name="time">
    <option value="all">Select</option>
    <option value="oneweek">1 Week</option>
    <option value="onemonth">1 Month</option>
    <option value="threemonth">3 Months</option>
    <option value="sixmonth">6 Months</option>
</select>

I am not getting any error in console.