WordPress. DataTables dataTables_wrapper is not loading

In my WordPress v5.5.1, I have a custom post type archive page to show all the posts. For this feature, we wanted to use the DataTable. Have enqueued the DataTable files as below:

    wp_deregister_script('jquery'); // deregistered default jQuery
    wp_enqueue_script('jq', 'https://code.jquery.com/jquery-3.5.1.min.js', array(), null, true); // for Bootstrap
    // DATATABLES
    wp_enqueue_script('js', 'https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js', array('jq'), null, true);
    wp_enqueue_script('wp-js', 'scripts.js', array('jq'), null, true);
    wp_enqueue_style('css', 'https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css');

In my scripts.js file which is being loaded, I have enabled the DataTables as below:

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

Below is the HTML table:

<table id="songs" class="table dataTable">
    <thead>
        <tr>
            <th>Songs</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Song 1</td>
        </tr>
        <tr>
            <td>Song 2</td>
        </tr>
        <tr>
            <td>Song 3</td>
        </tr>
        <tr>
            <td>Song 4</td>
        </tr>
    <tbody>
</table>

DataTable css files and js files are being loaded and styles are applied.

However the dataTables_wrapper is not being loaded, where we can sort the table content, pagination and search bar. I see only the plain HTML table.

I ran this code in the JSFiddle and works fine (https://jsfiddle.net/0burvh1y/).

I have tried deactivating all plugins and using default WordPress jquery as well, but with no luck.

from WordPress. DataTables dataTables_wrapper is not loading