Varying ESLint handling for mjs, js, and ts files

My project uses ESM (.mjs) files for server-side code, CommonJS (.js) for tooling, and TypeScript (.ts) for the client.

When viewing CommonJS files in VS Code, errors are being shown for requires..."Require statement not part of import statement.eslint@typescript-eslint/no-var-requires."

This is a good rule for the .ts files but not for CommonJS.

Here's my ESLint config from my package.json...

 "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "prettier/prettier": [
        "error",
        {
          "semi": false
        }
      ]
    },
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },

Any thoughts as to how I should structure it applies TypeScript rules to .ts, CommonJS rules to .js and ESM rules to .msj?