Prettier does not apply when eslint accuses max-length and .prettierignore does not work

Case 1 (PrintWidth):

What happens in this case is the following, I have configured printWidth in the .prettierrc file, in the vscode settigns.json and in the .eslintrc.js. However, when reaching the max-length, which in this case is 120, the prettier does not apply its styling.

Case 2 (.prettierignore)

The prettier simply ignores this file and does not apply the rules it contains.

Desired resolution for Case 1:

When eslint verifies that the code is at the limit of the line size, which in this case is 120 and greater than the limit, it "breaks" the code, such as, for example, lowering the properties of the JSX components etc.

Desired resolution for Case 2:

That the prettier can use the .prettierignore file

MY VSCODE SETTINGS:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.rulers": [120, 120]

MY PRETTIER CONFIG:

{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": true,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "jsxBracketSameLine": false,
    "bracketSpacing": true,
    "arrowParens": "always",
    "endOfLine": "lf",
    "quoteProps": "as-needed",
    "trailingComma": "none"
}

MY ESLINTRC CONFIG:

module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    extends: [
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:prettier/recommended',
        'plugin:import/errors',
        'plugin:import/warnings',
        'react-app',
        'react-app/jest',
        'airbnb'
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        ecmaVersion: 5,
        sourceType: 'module'
    },
    plugins: ['react', 'react-hooks', 'prefer-arrow', 'prettier', '@typescript-eslint'],
    settings: {
        react: {
            version: 'detect'
        },
        'import/resolver': {
            node: {
                paths: ['src'],
                moduleDirectory: ['node_modules', 'src/'],
                extensions: ['.js', '.jsx', '.ts', '.tsx']
            }
        }
    },
    overrides: [
        {
            files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
            plugins: ['@typescript-eslint'],
            rules: {
                'no-use-before-define': 'off',
                '@typescript-eslint/no-use-before-define': ['error']
            }
        }
    ],
    ignorePatterns: ['src/assets/images/*', 'src/assets/fonts/*'],
    rules: {
        '@typescript-eslint/no-unused-vars': ['error'],
        'prettier/prettier': 'error',
        'arrow-body-style': 'off',
        'arrow-parens': ['error', 'always'],
        'object-curly-newline': 'off',
        'no-tabs': 0,
        indent: [2, 'tab', { SwitchCase: 1 }],
        'comma-dangle': ['error', 'never'],
        'max-len': ['error', { code: 120 }],
        'jsx-quotes': ['error', 'prefer-single'],
        'implicit-arrow-linebreak': 'off',
        'operator-linebreak': [
            'error',
            'after',
            {
                overrides: {
                    ':': 'before'
                }
            }
        ],
        'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
        'react-hooks/exhaustive-deps': 'warn', // Checks effect,
        'react/jsx-indent-props': 'off',
        'react/react-in-jsx-scope': 'off',
        'react/jsx-props-no-spreading': 'off',
        'react/jsx-boolean-value': 'off',
        'react/jsx-indent': ['error', 'tab', { checkAttributes: true, indentLogicalExpressions: true }],
        'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
        'react/jsx-wrap-multilines': [
            'error',
            {
                declaration: 'parens-new-line',
                assignment: 'parens-new-line',
                return: 'parens-new-line',
                arrow: 'parens-new-line',
                condition: 'parens-new-line',
                logical: 'parens-new-line',
                prop: 'parens-new-line'
            }
        ],
        'prefer-arrow-callback': 'off',
        'prefer-arrow/prefer-arrow-functions': [
            'error',
            {
                disallowPrototype: true,
                singleReturnOnly: false,
                classPropertiesAllowed: false
            }
        ],
        'import/prefer-default-export': 'off',
        'import/extensions': [
            'error',
            'ignorePackages',
            {
                js: 'never',
                jsx: 'never',
                ts: 'never',
                tsx: 'never'
            }
        ]
    }
};