Make external package and internal components folder as a separate group

I have this eslint configuration:
```json
"import/order": [
"error",
{
"pathGroups": [
{
"pattern": "@frontend/components",
"group": "internal",
"position": "after"
},
{
"pattern": "~/components/**",
"group": "internal",
"position": "after"
}
],
"groups": [
"builtin",
"external",
"internal",
"unknown",
"parent",
"sibling",
"index",
"object",
"type"
]
}
]
```
I would like all my imports of `@frontend/components` and ` ~/components/ **` to be treated as a separate group. How can I do this?

Start with the import/order rule and the pathGroups and groups configuration shown in the issue. Determine how @frontend/components and ~/components/** can be treated as a distinct import group; done means the rule supports that grouping and its ordering behavior is covered by tests.

Written by the indexing model from the issue text.