ESLintでReact.Fragmentを使っても怒られないようにしたい

前提・実現したいこと

「import { Fragment } from 'react';」してきたFragmentを使って「<Fragment>hoge</Fragment>」で囲った関数コンポーネントを怒られずに有効化したいです。
Fragmentだけの警告を無視できれば解決できます。

(ESLint初心者です。Prettierとの併用で右往左往してしまっており基本的なところが抜け落ちていたりします。)

発生している問題・エラーメッセージ

CSSのemotionを導入しているのですが、emotionを入れているとショートハンド方式「<>hoge</>」のインラインだとファイル(VSCode)の中で以下のように怒られてしまいます。

JSX fragment is not supported when using an inline JSX factory pragmats(17017)

ググっていても、どうも省略できないようでした。そのため、「<Fragment>hoge</Fragment>」をあえて使っているのですが、そうすると今度はESLintに下記のメッセージで怒られてしまいます。

11:3  error  Prefer fragment shorthand over jsx.Fragment                              react/jsx-fragments

ショートハンドの方が良いよとエラーが表示されます。Fragmentだけの警告を無視できるのでしょうか。

該当のソースコード

React
1/** @jsx jsx */
2import { Fragment, FC } from 'react';
3import { css, jsx } from '@emotion/core';
4
5const wrapHeader = css({
6  fontSize: '32px',
7  color: 'pink',
8});
9
10const Header: FC = () => (
11  <Fragment>
12    <div css={wrapHeader}>test</div>
13  </Fragment>
14);
15
16export default Header;
17

eslintrc
1module.exports = {
2  env: {
3    browser: true,
4    es6: true,
5    node: true,
6    'jest/globals': true,
7  },
8  extends: [
9    'airbnb',
10    'eslint:recommended',
11    'plugin:@typescript-eslint/eslint-recommended',
12    'plugin:@typescript-eslint/recommended',
13    'plugin:import/errors',
14    'plugin:import/warnings',
15    'plugin:import/typescript',
16    'plugin:jest/recommended',
17    'plugin:jsx-a11y/recommended',
18    'plugin:prettier/recommended',
19    'plugin:react/recommended',
20    'prettier',
21    'prettier/@typescript-eslint',
22    'prettier/react',
23    'prettier/standard',
24  ],
25  globals: {
26    Atomics: 'readonly',
27    cy: 'readonly',
28    Cypress: 'readonly',
29    SharedArrayBuffer: 'readonly',
30    __DEV__: true,
31  },
32  parser: '@typescript-eslint/parser',
33  parserOptions: {
34    ecmaFeatures: {
35      jsx: true,
36    },
37    ecmaVersion: 2018,
38    project: './tsconfig.json',
39    sourceType: 'module',
40  },
41  plugins: [
42    '@typescript-eslint',
43    'import',
44    'jest',
45    'jsx-a11y',
46    'prefer-arrow',
47    'prettier',
48    'react',
49    'react-hooks',
50  ],
51  root: true,
52  rules: {
53    // eslint official
54    'linebreak-style': ['error', 'unix'],
55    'newline-before-return': 'error',
56    'no-console': 'warn',
57    'no-continue': 'off',
58    quotes: ['error', 'single', { avoidEscape: true }],
59    'require-yield': 'error',
60    semi: ['error', 'always'],
61    // for react-app-env.d.ts (https://github.com/facebook/create-react-app/issues/6560)
62    'spaced-comment': [
63      'error',
64      'always',
65      {
66        markers: ['/'],
67      },
68    ],
69
70    // @typescript-eslint
71    '@typescript-eslint/explicit-function-return-type': 'off',
72    '@typescript-eslint/explicit-member-accessibility': 'off',
73    indent: 'off',
74    '@typescript-eslint/indent': 'off',
75    '@typescript-eslint/no-unnecessary-type-assertion': 'error',
76    '@typescript-eslint/no-unused-vars': 'error',
77    '@typescript-eslint/prefer-interface': 'off',
78
79    // airbnb
80    'no-restricted-syntax': [
81      'error',
82      {
83        selector: 'ForInStatement',
84        message:
85          'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
86      },
87      {
88        selector: 'LabeledStatement',
89        message:
90          'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
91      },
92      {
93        selector: 'WithStatement',
94        message:
95          '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
96      },
97    ],
98    // prefer-arrow
99    'prefer-arrow/prefer-arrow-functions': [
100      'error',
101      {
102        disallowPrototype: true,
103        singleReturnOnly: true,
104        classPropertiesAllowed: false,
105      },
106    ],
107
108    // react
109    'react/jsx-filename-extension': [
110      'error',
111      {
112        extensions: ['jsx', 'tsx'],
113      },
114    ],
115    'react/jsx-props-no-spreading': [
116      'warn',
117      {
118        custom: 'ignore',
119      },
120    ],
121    'react/prop-types': 'off',
122    'react/jsx-uses-vars': 1,
123    "react/jsx-uses-react": [1],
124
125    // react hooks
126    'react-hooks/rules-of-hooks': 'error',
127    'react-hooks/exhaustive-deps': 'error',
128
129    // import
130    'import/extensions': [
131      'error',
132      'always',
133      {
134        js: 'never',
135        jsx: 'never',
136        ts: 'never',
137        tsx: 'never',
138      },
139    ],
140    'import/no-extraneous-dependencies': [
141      'error',
142      {
143        devDependencies: false,
144        optionalDependencies: false,
145      },
146    ],
147    'import/prefer-default-export': 'off',
148  },
149  settings: {
150    'import/parsers': {
151      '@typescript-eslint/parser': ['.ts', '.tsx'],
152    },
153    'import/resolver': {
154      node: {
155        extensions: ['.js', 'jsx', '.ts', '.tsx'],
156        paths: ['src'],
157      },
158    },
159    react: {
160      version: 'detect',
161    },
162  },
163}
164