import/order ignores pathGroups order

eslint ignores the order in which imports are listed

example imports:

import React from 'react';

import Test from "components/Test";  
import Api from "pages/api";

eslint must throw an error saying that import from "pages/api" must be over "components/Test" and also be separated with a new line but it ignores this

eslint-plugin-import and eslint-import-resolver-typescript are already installed so I'm sure that I made a mistake somewhere, but where?

eslint rule:

"import/order": ["error", {
  "newlines-between": "always-and-inside-groups",
  "groups": ["builtin", "external", "internal"],
  "pathGroups": [
    {
      "pattern": "react",
      "group": "external",
      "position": "before"
    },
    {
      "pattern": "~/**",
      "group": "external",
      "position": "before"
    },
    {
      "pattern": "~/pages/**",
      "group": "internal"
    },
    {
      "pattern": "~/components/**",
      "group": "internal"
    },
    {
      "pattern": "~/startup/**",
      "group": "internal"
    },
    {
      "pattern": "~/hooks/**",
      "group": "internal"
    },
    {
      "pattern": "~/helpers/**",
      "group": "internal"
    },
    {
      "pattern": "~/generated/**",
      "group": "internal"
    },
    {
      "pattern": "~/styles/**",
      "group": "internal"
    }
  ],
  "pathGroupsExcludedImportTypes": ["react"],
  "alphabetize": {
    "order": "asc",
    "caseInsensitive": true
  }
}]

Project structure: