node_modules/datatables.net/js/dataTables.mjs (951:2) @ extend ⨯ TypeError: $.extend is not a func

shoom

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: i am trying to install Datatables and use it in my nextjs 14 project. If i use npm method - i get this error.
If i use cdn to put in the JavaScript files in a Script. I have to initialize the DataTable in a <Script /> tag? Then if i want to provide my own data from my api calls, it is in a normal function and i cant parse this data to the Initialization of my DataTable as it is in a <Script /> tag. This is what my layout.js looks like
<Script strategy="beforeInteractive" src="https://code.jquery.com/jquery-3.7.1.js" />
<Script strategy="beforeInteractive" src="https://cdn.datatables.net/2.0.2/js/dataTables.js" />
<Script id="dataTableScript">
{`
// const data=getClientData();
// console.log(data);
const table = new DataTable('#example');

                table.on('click', 'tbody tr', function (e) {
                    e.currentTarget.classList.toggle('selected');
                });

                document.querySelector('#button').addEventListener('click', function () {
                    alert(table.rows('.selected').data().length + ' row(s) selected');
                });
            `}
        </Script>

How do i achieve my config, to use DataTables and provide my own API data to the table. Does the JS have to be in a <Script /> tag as it is not working outside it. If i use NPM to install datatables.net-dt, i get the above error of "TypeError: $.extend is not a function"
Basically where do i add the javascript logic to my next js project, besides from the script tag as i want to add external data from api to it.