ESlint, React, Typescript giving no-unused-vars when they are clearly used

Question

I am having problems with no-unused-vars in my React/Typescript app when importing. I can see that these are mostly type/interface imports that are an issue. Something as basic as:

import { IProfile } from "./profileTypes";

const readProfile = (profile: IProfile) => profile.firstName;

export default readProfile;

is casuing ESlint:

1:10  error  'IProfile' is defined but never used  no-unused-vars

packages:

    "@typescript-eslint/eslint-plugin": "^3.7.1",
    "@typescript-eslint/parser": "^3.7.1",
    "eslint": "^7.5.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.4",
    "eslint-plugin-react-hooks": "^4.0.8",

And configuration:

{
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    },
    "rules": {
        "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
        "quotes": ["error", "double"],
        "import/extensions": [
            "error",
            "always",
            {
              "ts": "never",
              "tsx": "never",
              "js": "never",
              "jsx": "never"
            }
          ]
    }
}

I would prefer not to disable no-unused-vars completely.