emotion- js в приложении Create React - jsx определено, но никогда не используется

Question

Поэтому я попытался использовать emotion-js в первый раз и подсел на функцию css prop.

При попытке получить то, что написано в документации, я получил предупреждение от eslint.

'jsx' определен, но никогда не используется @ typescript-eslint / no-unused-vars

Используемый мной скрипт выглядит следующим образом.

import React from "react";
//** @jsx jsx */
import { jsx } from "@emotion/core";

export const Component = () => {
    return (
        <div css={{color: red}}>
            This is a component
        </div>
    )
}

Я использую VSCode, поэтому я вижу, что этот импорт помечен как никогда не использованный. (Имеет прозрачный цвет)

Но я использовал его для моего div, и если я удаляю импорт, моя css prop показывает ошибка.

Пожалуйста, помогите, как избежать этого предупреждения eslint или хотя бы заставить VSCode распознавать, что используется jsx.

Спасибо!

---

Редактировать : (Добавление ссылки)

Ссылка: https://emotion.sh/docs/css-prop#jsx -pragma

---

Редактировать 2: Я пытался добавить .eslintrc файл, который выглядел следующим образом

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      2,
      { "vars": "all", "args": "all", "varsIgnorePattern": "^jsx$" }
    ]
  }
}

Все еще получаете предупреждение, я сделал это неправильно?