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

When using certain React types in TypeScript, such as React.ComponentProps, the react/prop-types rule will trigger a false positive when using a property from that type.

import React from "react"; // ERROR export function LinkWithComponentProps(props: React.ComponentProps<"a">) { return <a href={props.href}>My link</a>; // ^ 'href' is missing in props validation eslint(react/prop-types) } // ERROR type TypeProps = React.ComponentProps<"a">; export function LinkWithTypeProps(props: TypeProps) { return <a href={props.href}>My link</a>; // ^ 'href' is missing in props validation eslint(react/prop-types) } // NO ERROR interface InterfaceProps extends React.ComponentProps<"a"> {} export function LinkWithInterfaceProps(props: InterfaceProps) { return <a href={props.href}>My link</a>; }

Linting the above code using eslint . --ext .tsx gives the following error:

/path/to/eslint-test/test.tsx 5:27 error 'href' is missing in props validation react/prop-types 12:27 error 'href' is missing in props validation react/prop-types 

Using the following versions:

 "@types/react": "^18.2.37", "@typescript-eslint/parser": "^6.10.0", "eslint": "^8.53.0", "eslint-plugin-react": "^7.33.2", "typescript": "^5.2.2"

And the following configuration:

module.exports = { env: { browser: true, node: true }, extends: ["plugin:react/recommended"], parser: "@typescript-eslint/parser", settings: { react: { version: "detect" }, }, plugins: ["react"], };

Expected Behavior

Using React.ComponentProps<"a"> or similar types such as ComponentPropsWithRef and ComponentPropsWithoutRef directly as types should not result in an error, and should work the same way as defining an interface that extends these types.

A minimal reproduction repository can be shared if needed.

eslint-plugin-react version

v.7.33.2

eslint version

v8.53.0

node version

v20.9.0