Nuxt 3 importing 'datatables.net-bs5' invoke error $.extend is not a function

MeowwwwW

Error messages shown:

500
$.extend is not a function

at /Git/crypto-portfolio-nuxt/node_modules/.pnpm/datatables.net@2.3.2/node_modules/datatables.net/js/dataTables.mjs:732:3)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async ViteNodeRunner.runModule (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:397:4)
at async ViteNodeRunner.directRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:375:3)
at async ViteNodeRunner.cachedRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:189:11)
at async ViteNodeRunner.dependencyRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:239:10)
at async /Git/crypto-portfolio-nuxt/node_modules/.pnpm/datatables.net-bs5@2.3.2/node_modules/datatables.net-bs5/js/dataTables.bootstrap5.mjs:2:128)
at async ViteNodeRunner.runModule (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:397:4)
at async ViteNodeRunner.directRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:375:3)
at async ViteNodeRunner.cachedRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:189:11)

Description of problem:
Sorry if this issue is fixed as I try to search the keyword nuxt 3 or $.extend is not a function I couldn't find any similar problem for nuxt 3. I am new and trying to install dataTable with bootstrap 5 to my nuxt 3 project where I follow the guide provided at https://datatables.net/manual/vue
For installation, I used
- pnpm add datatables.net-vue3 datatables.net-bs5

However when I try to import from 'datatables.net-bs5' it will display the 500 error showing $.extend is not a function as shown below. Hopefully anyone can help out on how to resolving this issue?

My component code is just as below

DataTable.vue

<template>

</template>

<script setup lang="ts">
import DataTable from 'datatables.net-vue3'
import DataTablesCore from 'datatables.net-bs5'

DataTable.use(DataTablesCore);
</script>

<style scoped>
@import url('datatables.net-bs5');
</style>