structuring imports - eslint-plugin-import

Question

this is more of a question as I have tried multiple ways to get the below structure working. Any tips?

.eslint.js

        "import/order": [
            "error",
            {
                "groups": ["builtin", "external", "internal", "sibling"],
                "pathGroups": [
                    {
                        "pattern": "react",
                        "group": "external",
                        "position": "before"
                    }
                ],
            }
        ],

I would like the below ordering strucutre:

// import anything react related

import React, { useRef, useState } from "react";`

// import third party packages

import _ from "lodash";

// import absolute

import { Component } from "shared/Component";

// import relative

import { utilsFunction } from "./utils";

// import styling

import css from "./Component.module.css";
```