Reproduce issue

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks"
+  ],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  }
+}

package.json

@@ -13,6 +13,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.2.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
@@ -39,5 +40,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.9",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "eslint": "^7.25.0",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0"
   }
 }

src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-function App() {
+export const App = (): JSX.Element => {
   return (
     <div className="App">
       <header className="App-header">
@@ -22,5 +22,3 @@ function App() {
     </div>
   );
 }
-
-export default App;

src/Test.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+export const WorkingLint: React.FunctionComponent<{prop?: string}> = ({prop}) => {
+  if(!prop) {
+    return null;
+  }
+  const [] = useState(false);
+  return (
+    <div> Lint on hook is working </div>
+  );
+};
+
+export const NotWorkingLint = styled(({prop}:{prop?: string}) => {
+  if(!prop) {
+    return null;
+  }
+  const [] = useState(false);
+  return (
+    <div> Lint on hook is working </div>
+  );
+})``;
+

src/index.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import {App} from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();