eslint-plugin-simple-import-sort Sorting error

Below is my .eslint.js. I am trying to define that react should be the first import in my .js files. However, I get the below error thrown even when react is at the top of the file?

I have followed some guides online but can't see where I am going wrong?

Line 1:1:  Run autofix to sort these imports!  simple-import-sort/imports

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

module.exports = {
    env: {
      ...
    },
    extends: [
      ...
    ],
    parser: "@babel/eslint-parser",
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        ecmaVersion: 6,
        sourceType: "module",
        requireConfigFile: false,
        "babelOptions": {
            "presets": ["@babel/preset-react"]
        },
        "sourceType": "module"
    },
    plugins: [
        "react",
        "import",
        "simple-import-sort"
    ],
    root: true,
    rules: {
        ...
        "simple-import-sort/imports": "error",
        "simple-import-sort/exports": "error"
    },
    settings: {
        react: {
            version: "detect"
        }
    },
    "overrides": [
        {
            "files": [
                "*.js",
                "*.jsx",
            ],
            "rules": {
                "simple-import-sort/imports": [
                    "error",
                    {
                        "groups": [
                            // Packages `react` related packages come first.
                            ["^react"],
                        ]
                    }
                ]
            }
        }
    ]

};