Angular Drop down is not working and by default remains open

*Expected behavior*drop down open and close should work and by default the dropdown should be close which is right here in open state.

*Actual behavior*dropdown is not working and by default dropdown state is open.

Resources (screenshots, code snippets etc.)

here is the snippet code i have used. (its just copy and paste from components navbar)

Packages Imported to app.config.jsproviders: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimations(), provideAnimationsAsync(), provideHttpClient(), importProvidersFrom( [ BrowserModule, BrowserAnimationsModule ] ), provideAnimations()

]

packages installed and configured in angular.js"styles": [ "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "./node_modules/@popperjs/core/dist/umd/popper.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/chart.js/dist/chart.js" ]

version of the above packages are listed below."@fortawesome/fontawesome-free": "^6.7.0", "@popperjs/core": "^2.11.8", "@types/jquery": "^3.5.32", "bootstrap": "^5.3.3", "chart.js": "^3.1.1", "jquery": "^3.7.1", "mdb-angular-ui-kit": "git+https://oauth2:ProAccessToken@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential",

Please help me to rectify the issue as i am stuck and I am using Angular version 18.*.