Typescript paths working correctly, but eslint is not respecting them

After looking through this post and trying everything in here. Nothing seemed to work.

We tried adding the node part to the import/resolver but that did not seem to work. We are also u sing a monorepo if that effects anything? Something else that was tried was adding a project to the typescript resolver but that also did not work.

Tried switching up the paths to the direct path inside the tsconfig.json, but that also did not work.

Here are my files:

Example import: import { colors } from "@styles"

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "outDir": "lib",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "declaration": true,
    "declarationDir": "lib",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@styles/*": ["src/styles/*"],
      "@styles": ["src/styles/index.ts"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": [
    "src/*",
    "stories/*",
  ],
  "exclude": [
    "node_modules",
    "lib"
  ]
}

.eslintrc.js:

const vars = ["const", "let", "var"]

module.exports = {
  plugins: ["graphql"],
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  settings: {
    react: {
      version: "detect"
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/resolvers": {
      typescript: {}
    }
  },
  env: {
    browser: true,
    jest: true,
    node: true,
    es6: true
  },
  rules: {
    "import/newline-after-import": "error",
    "import/order": [
      "error",
      {
        "newlines-between": "never"
      }
    ],
    "@typescript-eslint/camelcase": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
    "padding-line-between-statements": [
      "error",
      {
        blankLine: "always",
        prev: vars,
        next: "*"
      },
      {
        blankLine: "any",
        prev: vars,
        next: vars
      },
      {
        blankLine: "always",
        prev: "*",
        next: "return"
      },
      {
        blankLine: "always",
        prev: "*",
        next: "block-like"
      },
      {
        blankLine: "always",
        prev: "block-like",
        next: "*"
      }
    ],
    "react/prop-types": "off",
    "no-irregular-whitespace": "off"
  },
  overrides: [
    {
      files: ["*.js", "*.ts", "*.tsx"],
      rules: {
        "@typescript-eslint/explicit-function-return-type": "off",
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off"
      }
    }
  ]
}