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

I know there are several other issues with false positives on this error and the underlying cause might be the same, but my code isn't similar to them. My problem seems to be when you have a component defined within another component and the inner component has a prop with the same name as a variable in a nested scope within the outer component:

you can replicate this on a clean create-react-app with --template typescript and then adding the following 2 files:
.eslintrc.json:

  "extends": [
    "plugin:react/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "react"
  ]
}

react component:

import React, { FunctionComponent, useEffect } from 'react';

type Widget = { id: number }
type MainComponentProps = { dummy: string }

export const MainComponent: FunctionComponent<MainComponentProps> = ({ dummy }) => {
  const widgets: Widget[] = []
  useEffect(() => { })

  type SubComponentProps = {
    widget: Widget
  }

  const SubComponent: FunctionComponent<SubComponentProps> = ({ widget }) => {
    return <>{widget.id}</>
  }

  return <>
    {widgets.map((widget, jIdx) => (
      <span key={jIdx}>{widget.id}</span>
    ))}
  </>

}

eslint gives error 'widget.id' is missing in props validation on line 20 (the <span>)

note this only happens if the name of the local variable in that line is the same as the name of the destructured prop in the subcomponent

it also disappears if you remove the useEffect or if you remove the props from the outer component, or don't destructure the props in the outer component.

Expected Behavior

no error should be reported

eslint-plugin-react version

v7.33.2

eslint version

v8.56.0

node version

v20.10.0