Expected behavior Modal opens just like on the Demo.

Actual behavior Modal makes twice the opacity transition when opened and closed. This only happens in firefox. I have tested in Edge and Chrome and the modal works seamlessly.

The Modal is in a Tabs Component.

I have recorded it in Firefox profiler and added the link in the Ressources. Between 1.3s and 2s it happens. It occours that the opacity css transition of the class fade is called twice. You can see this in the Marking Diagramm and in the screenshots.

The first css-transition is from the div with class "tabs-pane fade show active" and the second transition is form div with class "modal top fade show".

What's strange is, that I have tested this outside of the tabs component and this still occurs. So it's more like a react project specific thing. It also was not always like this. I check out earlier versions where I'm sure it worked, but this still occurs. So my guess is, this have to do something with package updates, because this is something I did recently. What I surely remember is, that I updated MDBoostrap to the newest version (8.0.0).

Have you seen this problem before? Why is it only in Firefox?

Resources (screenshots, code snippets etc.) https://share.firefox.dev/3youTs7

{
"name": "xxxxxxxx",
  "homepage": ".",
  "version": "0.2.0",
  "description": "xxxxxxx",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.9.11",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^29.5.5",
    "@types/node": "^20.8.4",
    "@types/react": "^18.2.28",
    "@types/react-dom": "^18.2.13",
    "apollo-upload-client": "^17.0.0",
    "chart.js": "^4.2.0",
    "graphql": "^16.8.1",
    "loadash": "^1.0.0",
    "lodash": "^4.17.21",
    "mdb-react-ui-kit": "git+https://oauth2:xxxxxxxxxx@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-advanced",
    "moment": "^2.29.4",
    "moment-duration-format": "^2.3.2",
    "ng2-charts": "^4.1.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-hook-form": "^7.42.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.6.2",
    "react-scripts": "5.0.1",
    "redux-persist": "^6.0.0",
    "requirejs": "^2.3.6",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "keywords": [
    "template",
    "react"
  ],
  "author": "xxxxxxx",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@typescript-eslint/parser": "^5.62.0",
    "eslint": "^8.51.0",
    "eslint-plugin-react-hooks": "^4.6.0"
  }
}