[eslint error] Function component is not a function declaration (react/function-component-definition)

//.eslintrc.cjs

module.exports = {
	parser: '@typescript-eslint/parser',
	extends: [
		'airbnb',
		'airbnb/hooks',
		'plugin:@typescript-eslint/recommended',
		'plugin:prettier/recommended',
		'plugin:import/errors',
		'plugin:import/warnings',
		'plugin:import/typescript',
	],
	parserOptions: {
		ecmaVersion: 2020,
		sourceType: 'module',
		ecmaFeatures: {
			jsx: true,
		},
	},
	plugins: ['import-order'],
	rules: {
		'@typescript-eslint/no-unused-vars': ['error'],
		'prettier/prettier': 'error',
		'react/react-in-jsx-scope': 'off',
		'react/jsx-filename-extension': [
			1,
			{ extensions: ['.js', '.jsx', '.ts', '.tsx'] },
		],
		'import/no-extraneous-dependencies': [
			'error',
			{
				devDependencies: true,
				optionalDependencies: false,
				peerDependencies: false,
			},
		],
		'import/order': [
			'error',
			{
				groups: ['builtin', 'external', 'internal', 'index'],
				pathGroups: [
					{
						pattern: 'react',
						group: 'external',
						position: 'before',
					},
				],
				pathGroupsExcludedImportTypes: ['react'],
				alphabetize: {
					order: 'asc',
					caseInsensitive: true,
				},
			},
		],
	},
	settings: {
		react: {
			version: 'detect',
		},
	},
};

문제

현재 설정파일이 이런식인데, 화살표 함수를 쓰려고하면 다음과 같은 에러가 났다.

const App = () => {
	return (
		<div>
			<GlobalStyles />
			<p>App</p>
		</div>
	);
};

export default App;

해결

간단한 해결법은 기명함수 일때 무조건 화살표함수를 써야한다는 rules를 추가해주는 것이다. 2는 화살표함수를 쓰지 않으면 에러로 표시한다는 말이다.

		'react/function-component-definition': [
			2,
			{
				namedComponents: 'arrow-function',
			},
		],

하지만 이 방법 말고 다른 방법이 있는지 찾아봐야할 것 같다.