Bootstrap 5 Collapse cannot collapse after open it (working with vue3)

I am working on a project using Vue 3 and Bootstrap 5. I encountered an issue with Bootstrap collapse. While I am able to successfully open the collapse, I am unable to collapse it again.

package.json

"dependencies": {
    "@ivanv/vue-collapse-transition": "^1.0.2",
    "all": "^0.0.0",
    "axios": "^0.26.1",
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.10.5",
    "bp-vuejs-dropdown": "^2.1.1",
    "chart.js": "^3.6.0",
    "core-js": "^3.6.5",
    "datatables.net-bs5": "^1.13.6",
    "install": "^0.13.0",
    "js-base64": "^3.7.2",
    "lz-string": "^1.5.0",
    "npm": "^9.8.1",
    "vee-validate": "^4.7.4",
    "vue": "^3.0.0",
    "vue-ctk-date-time-picker": "^3.0.0-alpha.0",
    "vue-router": "^4.0.0-0",
    "vue2-daterange-picker": "^0.6.8",
    "vue3-chart-v2": "^0.8.3",
    "vuejs-datetimepicker": "^1.1.13",
    "vuex": "^4.0.0-0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
  },

main.js

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

myscript.js

<template>
  <div>
    <div class="bg-white">
      <div class="row gap-3">
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a>
          <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
          </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</div>
        </div>
      </div>
    </div>
  </div>
</template>

I think the issue is related to package conflicts, but I have tried various methods and have not been able to identify the problem.

I've identified the issue. The problem lies in my partner rewriting import bootstrap from 'bootstrap'. causing conflicts with the Bootstrap execution later on.