prettier and eslint max-len code fix not working properly

Question

I have just configured eslint and prettier in my project and set up a rule for max len. But it is not working as expected. I wanted to break the line when the it exceeds 120 characters. It does break the line but only when the character length is more than 135 characters.

Preview:

My config files: eslintrc

"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
    "plugins": ["import", "react", "prettier"],
    "rules": {
        "react/jsx-uses-react": 2,
        "react/react-in-jsx-scope": "off",
        "prettier/prettier": "error",
        "camelcase": "off",
        "import/prefer-default-export": "off",
        "react/prop-types": "off",
        "react/jsx-filename-extension": "off",
        "react/jsx-props-no-spreading": "off",
        "react/no-unused-prop-types": "off",
        "react/require-default-props": "off",
        "quotes": "off",
        "no-unused-vars": "warn",
        "no-console": "warn",
        "max-len": ["error", { "code": 120, "ignoreUrls": true, "ignoreRegExpLiterals": true }]
    }

prettierrc

{
    "trailingComma": "all",
    "singleQuote": true,
    "tabWidth": 2,
    "printWidth": 120,
    "proseWrap": "preserve",
    "useTabs": true,
    "bracketSpacing": true,
    "arrowParens": "always",
    "endOfLine": "auto"
}