Material-UI lagging text when open menu

Question

Issue Video

I have a problem when open and close the Menu. Follow the example. I don't know why the text just change the position slowly. Please help me.

This is my devDependencies I using config webpack.

"devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@types/google-libphonenumber": "^7.4.21",
    "@types/google.maps": "^3.45.6",
    "@types/react": "^17.0.3",
    "@types/react-date-range": "^1.1.5",
    "@types/react-dom": "^17.0.3",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-root-import": "^6.6.0",
    "copy-webpack-plugin": "^8.1.1",
    "css-loader": "^5.2.4",
    "eslint": "^7.24.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "node-sass": "^6.0.0",
    "pre-commit": "^1.2.2",
    "sass-loader": "^11.1.0",
    "style-loader": "^2.0.0",
    "svg-url-loader": "^7.1.1",
    "terser-webpack-plugin": "^5.1.1",
    "ts-loader": "^9.0.0",
    "typescript": "^4.2.4",
    "webpack": "^5.33.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },

Answer 1

You can override the TransitionProp to change the duration of the opening animation. See the full prop list of the Transition component here:

<Menu
  TransitionProps={{
    timeout: 0
  }}
  {...}
>

Live Demo