Typescript – React typescript: eslint max-length autofix does not work

I am trying setup React typescript's eslint setup where code's max lenght is 80, if the code is more than 80 then it will break the line and codes will go to the next line automatically. But seems like my eslint max-lenght auto-fix does not work. I just go warn and when i click the quick its just disable the entire component. Currently, my code looks this, I have scroll all the way to the right to see all the codes. PS. I delete prettier extension.

This is my .eslintrc.js setup

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  parserOptions: {
    jsx: true,
    useJSXTextNode: true
  },
  plugins: [
    '@typescript-eslint',
    "react",
    "react-hooks"
  ],
  settings: {
    react: {
      version: "999.999.999" // no latest option, 999.999.999 as a hack
    }
  },
  rules: {
    semi: ["warn", "always"],
    indent: "off",
    "@typescript-eslint/indent": ["warn", 2],
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/interface-name-prefix": 0,
    "@typescript-eslint/no-empty-interface": 0,
    "react/jsx-uses-vars": 1,
    "quotes": "off",
    "@typescript-eslint/quotes": ["warn", "backtick", { avoidEscape: true }],
    "max-len": ["warn", { code: 80, ignoreComments: true }],
    "arrow-parens": ["warn", "always"],
    "arrow-spacing": "warn",
    "no-var": "warn",
    "no-const-assign": "warn",
    "no-dupe-class-members": "warn",
    "no-duplicate-imports": ["warn", { includeExports: true }],
    "prefer-arrow-callback": ["warn", { "allowNamedFunctions": true }],
    "prefer-const": "warn",
    "react/display-name": ["warn", { "ignoreTranspilerName": true }],
    "padding-line-between-statements": [
      "warn",
      { blankLine: "always", prev: "function", next: "function" }
    ],
    "prefer-destructuring": [
      "warn",
      {
        array: false,
        object: true
      },
      {
        enforceForRenamedProperties: false
      }
    ],
    "template-curly-spacing": "warn",
    "no-dupe-args": "warn",
    "no-dupe-keys": "warn",
    "no-duplicate-case": "warn",
    "no-empty": "warn",
    "no-extra-semi": "warn",
    "no-extra-parens": ["warn", "all"],
    "no-extra-boolean-cast": "warn",
    "no-func-assign": "warn",
    "no-inner-declarations": "warn",
    "no-irregular-whitespace": "warn",
    "no-sparse-arrays": "warn",
    "no-unreachable": "warn",
    "accessor-pairs": "warn",
    "block-scoped-var": "warn",
    curly: "warn",
    "default-case": "warn",
    "dot-notation": "warn",
    eqeqeq: "warn",
    "guard-for-in": "warn",
    "no-empty-pattern": "warn",
    "no-multi-spaces": ["warn", { ignoreEOLComments: true }],
    "no-new": "warn",
    "no-new-func": "warn",
    "array-bracket-newline": ["warn", { multiline: true }],
    "array-bracket-spacing": ["warn", "never"],
    "block-spacing": "warn",
    "brace-style": ["warn", "1tbs", { allowSingleLine: true }],
    camelcase: "warn",
    "comma-dangle": [
      "warn",
      {
        arrays: "never",
        objects: "never",
        imports: "never",
        exports: "never",
        functions: "never"
      }
    ],
    "comma-spacing": ["warn", { before: false, after: true }],
    "comma-style": ["warn", "last"],
    "computed-property-spacing": ["warn", "never"],
    "eol-last": ["warn", "always"],
    "func-call-spacing": ["warn", "never"],
    "func-names": ["warn", "always", { "generators": "as-needed" }],
    "func-style": ["warn", "expression", { allowArrowFunctions: true }],
    "jsx-quotes": ["warn", "prefer-double"],
    "key-spacing": ["warn", { beforeColon: false }],
    "keyword-spacing": ["warn", { before: true }],
    "lines-around-comment": ["warn", { beforeBlockComment: false }],
    "no-array-constructor": "warn",
    "no-lonely-if": "warn",
    "no-multiple-empty-lines": ["warn", { max: 1, maxEOF: 1 }],
    "no-multi-assign": "warn",
    "no-trailing-spaces": "warn",
    "no-unneeded-ternary": "warn",
    "no-whitespace-before-property": "warn",
    "object-curly-spacing": ["warn", "always"],
    "object-property-newline": ["warn", { allowAllPropertiesOnSameLine: true }],
    "padded-blocks": ["warn", "never"],
    "quote-props": ["warn", "always"],
    "semi-spacing": ["warn", { before: false, after: true }],
    "semi-style": ["warn", "last"],
    "sort-vars": ["warn", { ignoreCase: true }],
    "space-before-blocks": ["warn", "always"],
    "space-before-function-paren": ["warn", {
      "anonymous": "never",
      "named": "never",
      "asyncArrow": "always"
    }],
    "space-in-parens": ["warn", "never"],
    "spaced-comment": ["warn", "always"],
    "switch-colon-spacing": "warn",
    "@typescript-eslint/explicit-member-accessibility": "warn",
    "no-empty-function": "off",
    "@typescript-eslint/no-empty-function": ["error", { "allow": ["arrowFunctions"] }],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
};

** This is my .vscode/settings.json **

{
    "editor.cursorBlinking": "blink",
    "editor.cursorStyle": "line",
    "editor.detectIndentation": false,
    "editor.fontFamily": "'Operator Mono',  'SF Mono', Menlo, Operator Mono, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.fontWeight": "500",
    "editor.insertSpaces": true,
    "editor.letterSpacing": 0,
    "editor.lineHeight": 28,
    "editor.lineNumbers": "on",
    "editor.minimap.enabled": true,
    "editor.quickSuggestions": {
        "comments": false,
        "other": true,
        "strings": false
    },
    "editor.quickSuggestionsDelay": 10,
    "editor.renderControlCharacters": true,
    "editor.renderIndentGuides": true,
    "editor.renderWhitespace": "all",
    "editor.rulers": [
        90,
        100
    ],
    "editor.snippetSuggestions": "top",
    "editor.tabCompletion": "on",
    "editor.tabSize": 2,
    "editor.trimAutoWhitespace": true,
    "files.autoGuessEncoding": true,
    "files.autoSave": "onFocusChange",
    "files.defaultLanguage": "html",
    "files.exclude": {
        "**/*.pyc": true,
        "**/package-lock.json": true,
        "**/styles/css/": true,
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.hg": true,
        "**/.svn": true,
        "**/CVS": true,
        "**/distribution/": true,
        "**/dist/": true,
        "**/libraries/": true,
        "**/lib/": true,
        "**/node_modules/": true,
        "**/build/": true,
    },
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vs-seti",
    "workbench.sideBar.location": "left",
    "editor.dragAndDrop": false,
    "extensions.ignoreRecommendations": true,
    "files.associations": {
        "*.vue": "html",
        "Vagrantfile": "ruby",
        "*.js": "javascript"
    },
    "python.linting.pylintEnabled": false,
    "python.linting.lintOnSave": false,
    "python.linting.pycodestyleEnabled": false,
    "python.linting.flake8Enabled": true,
    "python.linting.flake8Args": [
        "--max-line-length=100",
    ],
    "python.linting.pycodestyleArgs": [
        "--ignore=E501"
    ],
    "[plaintext]": {},
    "[javascript]": {
        "editor.formatOnSave": true,
    },
    "[typescriptreact]": {
        "editor.formatOnSave": true,
    },
    "[typescript]": {
        "editor.formatOnSave": true
    },
    "javascript.updateImportsOnFileMove.enabled": "never",
    "breadcrumbs.enabled": true,
    "[python]": {
        "editor.tabSize": 4,
    },
    "typescript.validate.enable": false,
    "javascript.validate.enable": false,
    "docthis.includeDescriptionTag": true,
    "docthis.inferTypesFromNames": true,
    "merge-conflict.autoNavigateNextConflict.enabled": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDelete": false,
    "typescript.surveys.enabled": false,
    "eslint.validate": [

      { "language": "javascript", "autoFix": true },
      { "language": "javascriptreact", "autoFix": true },
      { "language": "typescript", "autoFix": true },
      { "language": "typescriptreact", "autoFix": true }
    ],
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "workbench.colorTheme": "Night Owl",
    "workbench.statusBar.visible": true,
    "eslint.codeAction.disableRuleComment": {},
    "eslint.codeAction.showDocumentation": {}
}