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

Brief description

It appears the react/destructuring-assignment rule is not behaving consistently with type definitions.

Code example

type Props = { text: string };
export const MyComponent: React.FC<Props> = (props) => {
  return <div>{props.text}</div>;
  //           ^^^^^^^^^^
};

export const MyOtherComponent: React.FC<Props> = (props) => {
  const { text } = props;
  type MyType = typeof props.text;
  return <div>{text as MyType}</div>;
};

What is happening? / What is the error?

• In MyComponent, linter gives a react/destructuring-assignment error.
• In MyOtherComponent linter stays silent.

To me this appears as an unexpected inconsistency.

What command(s) did you run to reproduce issue?

Using the code example above;

npx eslint ./eslint-test.tsx

Expected Behavior

I would expect both components to trigger the linter rule.

eslint-plugin-react version

v7.34.3

eslint version

v8.57.0

node version

v18.20.2