[Bug]: Properties faulty identified as not declared for types in react-hook-form

[fredrikcarlbom]

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

Lint returns errors for types from react-hook-form

Example of problematic code

import React from 'react'
import { Controller, useForm } from 'react-hook-form'
import { TextField } from '@mui/material'

interface IFormTestProps {
    number: number
}

const FormTest = () => {
    const { control, register } = useForm<IFormTestProps>({})
    return (
        <form>
            <Controller
                name="number"
                control={control}
                render={(props) => {
                    console.log(props.field.ref)
                    return (
                        <TextField
                            label="Number"
                            type="number"
                            {...register('number')}
                            onChange={(e) => {
                                // This is what we want to do
                                props.field.onChange(parseInt(e.target.value, 10))
                            }}
                        />
                    )
                }}
            />
        </form>
    )
}

export default FormTest

Lint error

> npm run lint
...
c:\...\FormTest.tsx
  17:39  error  'field' is missing in props validation           react/prop-types
  17:45  error  'field.ref' is missing in props validation       react/prop-types
  25:39  error  'field' is missing in props validation           react/prop-types
  25:45  error  'field.onChange' is missing in props validation  react/prop-types

I believe these are the relevant dependencies

{
  "devDependencies": {
    "@types/react": "18.2.79",
    "@types/react-dom": "18.2.25",
    "@typescript-eslint/eslint-plugin": "7.7.0",
    "@typescript-eslint/parser": "7.7.0",
    "eslint": "8.57.0",
    "eslint-plugin-import": "2.29.1",
    "eslint-plugin-react": "7.34.1",
    "eslint-plugin-react-hooks": "4.6.0",
    "typescript": "5.4.5"
  },
  "dependencies": {
    "@mui/material": "5.15.15",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "scripts": {
    "lint": "eslint src --cache --ext .ts,.tsx,.snap"
  },
}

Expected Behavior

I expected that eslint-plugin-react would detect imported types correctly and not report these errors.

eslint-plugin-react version

v7.34.1

eslint version

v8.57.0

node version

v20.10.0

[ljharb]

The FormTest component doesn't have any types declared, so these warnings are correct.