ESLint not working with existing .eslintrc.json file in project

I've tried a number of things on VS Code like unintstalling/reinstalling ESLint. npm install eslint -g, and manually putting in

{
  "eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
}

into my settings.json file which is:

{
    "window.zoomLevel": 1,
    "editor.wordWrap": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.iconTheme": "vscode-icons",
    "yaml.schemas": {
        "REDACTED"
    },
    "atlascode.jira.jqlList": [
        {
            REDACTED
        }
    ],
    "vsicons.dontShowNewVersionMessage": true,
    "workbench.colorTheme": "Dark++",
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.fontSize": 15,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "atlascode.jira.lastCreateSiteAndProject": {
        "siteId": REDACTED,
        "projectKey": ""
    },
    "highlightLine.borderColor": "#65EAB9",
    "highlightLine.borderStyle": "inset",
    "highlightLine.borderWidth": "2px",
    "editor.renderWhitespace": "boundary",
    "git.autofetch": true,
    "[typescriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "eslint.alwaysShowStatus": true
}

Here is my eslintrc.json file:

{
    "extends": [
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "eslint:recommended"
    ],
    "plugins": [
        "@typescript-eslint",
        "react",
        "react-hooks"
    ],
    "env": {
        "browser": true,
        "jest": true,
        "es6": true
    },
    "rules": {
        "max-len": ["error", { "code": 120 }],
        "quotes": [2, "single", { "avoidEscape": true }],
        "object-curly-spacing": ["error", "always"],
        "array-bracket-spacing": ["error", "never"],
        "react/jsx-uses-react": "error",
        "react/prop-types": [2, { "ignore": ["children"] }],
        "react-hooks/rules-of-hooks": "error",
        "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }]
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    },
    "parser": "@typescript-eslint/parser"
}

I am basically trying to have VSCode shout out me for having double quotes (rule #2) in my Routes.tsx file which has the following code block:

<Route exact path={`${Constants.Routes.Recruit.MODULE}${Constants.Routes.App.REDIRECT_URI}`} render={() => {
                let cookies = document.cookie.split(";");
                for (let i = 0; i < cookies.length; i++) {
                    let cookie = cookies[i];
                    let eqPos = cookie.indexOf("=");
                    let name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
                }
                document.location.href = urlRedirectIfUnauthenticated;
                return null
            }} >

What am I doing wrong here?