Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

Adding react/prefer-read-only-props rule does not trigger when using React.FC or React.FunctionComponent without importing React.

In modern React, we don't need to import React thanks to the new JSX Transform:

• https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-different-in-the-new-transform

And TypeScript supports this out of the box:

• https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories

So even for React types we don't have to import them. React.FC just works in .tsx files.

But react/prefer-read-only-props fails to identify the component as a React component if we use React.FC or React.FunctionComponent without importing React.

Expected Behavior

This code does NOT error

interface ChipProps {
  chipColor: string;
  label: string;
}

const Chip: React.FC<ChipProps> = ({ chipColor, label }) => {
  return <div style={{ backgroundColor: chipColor }}>{label}</div>;
};

This code does

import React from 'react'

interface ChipProps {
  chipColor: string;
  label: string;
}

const Chip: React.FC<ChipProps> = ({ chipColor, label }) => {
  return <div style={{ backgroundColor: chipColor }}>{label}</div>;
};

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    es2021: true,
  },
  plugins: ['@typescript-eslint', 'react'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    'react/prefer-read-only-props': 'warn',
  },
};

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "composite": false,
    "declaration": false,
    "declarationMap": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ES2021",
    "types": ["node", "@testing-library/jest-dom"],
  },
  "include": ["*.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
  "exclude": ["node_modules", "build", "storybook-static"]
}

Tried in VS Code and in the command line:

yarn eslint --max-warnings 0 src/components/Chip.tsx

eslint-plugin-react version

7.33.2

eslint version

8.38.0

node version

v16.14.0