React version:

    "react": "^18.2.0",
    "react-dom": "^18.2.0"

    "eslint": "^8.18.0",
    "eslint-plugin-react-hooks": "^4.6.0",

Steps To Reproduce

1. Open https://stackblitz.com/edit/vitejs-vite-tpaumc?file=src%2FApp.tsx&terminal=dev
2. Run npx eslint src
3. Get the following error:

error  React Hook "React.useState" is called in function "App.View" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Link to code example: https://stackblitz.com/edit/vitejs-vite-tpaumc?file=src%2FApp.tsx&terminal=dev

The current behavior

Given the following pattern:

const MyComponent = () => {
  return <MyComponent.Ready />;
}

MyComponent.Ready = () => {
  const [...] = useX();

  return (...);
}

I get the following error:

error React Hook "React.useState" is called in function "MyComponent.Ready" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

The expected behavior

Since MyComponent.Ready is an actual component, I shouldn't get this error.