React's useState hook defined inside function component in TypeScript still gave error - Invalid hook call

I was building a custom react component library. When I started using useState hook for a hover feature implementation. I started getting the following error in the browser console from the app generated by create-react-app.


Been trying to figure out the bug for quite some time, but haven't been able to fix this. Everywhere on stackoverflow and other troubleshooting articles told about defining the hooks in the top level of a function component, and according to my belief, I have defined it inside the top of function component in typescript.


Still the error happens.


Error from browser console





Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:



* You might have mismatching versions of React and the renderer (such as React DOM)

* You might be breaking the Rules of Hooks

* You might have more than one copy of React in the same app






See
https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.



What I tried





* const [hover, setHover] = useState(false); is actually defined in the top of a function component

* I have removed react, react-dom and their types @types/react, @types/react-dom and readded them of the version v18.3.0 both in the library & the app

* Ran npm ls react inside the app & found extraneous tagged react from the library, so ran npm prune

* Tested on browser firefox & edge

* Extracted a minimal component (button) from the library and redid a minimal version of the whole library and app implementation, figured the error comes only when adding the useState hook.

* Removed react in the generated app from create-react-app using yarn remove react command and just used the react which was included in the library. Had to run npm prune & also delete package-lock.json. Still it was an invalid hook implementation






Library




Just below is the code from react custom component library




(./jaghu/src/components/Button/Button.tsx)
import React, { useState } from "react";

export interface IButtonProps
extends React.DetailedHTMLProps<
React.ButtonHTMLAttributes,
HTMLButtonElement
> {
backgroundColor?: string;
color?: string;
width?: string;
height?: string;
}

export const Button: React.FunctionComponent = (props) => {
const [hover, setHover] = useState(false);
const MouseOver = () => setHover(true);
const MouseOut = () => setHover(false);

const { backgroundColor, width, height } = props;

let _style: React.CSSProperties = {
width: width ? width : "200px",
height: height ? height : "100px",
backgroundColor: backgroundColor ? backgroundColor : "skyblue",
color: hover ? "black" : "red",
};

/** Override Defaults CSS data using the values in Props CSS */
if (backgroundColor) _style.backgroundColor = backgroundColor;
if (width) _style.width = width;
if (height) _style.height = height;

return (

Hello BuTToNo

);
};



Library's package.json




(./jaghu/package.json)
{
"name": "jaghu",
"version": "1.0.0",
"license": "MIT",
"devDependencies": {
"@types/node": "^22.0.0",
"@types/react": "18.3.0",
"@types/react-dom": "18.3.0",
"@types/react-helmet": "^6.1.11",
"prettier": "^3.3.3",
"react": "18.3.0",
"react-dom": "18.3.0",
"react-helmet": "^6.1.0",
"typescript": "^5.5.4"
},
"scripts": {
"build": "rm -rf dist/ && prettier --write src/ && yarn run build:esm && yarn run build:cjs",
"build:esm": "tsc",
"build:cjs": "tsc --module CommonJS --outDir dist/cjs"
},
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"files": [
"dist"
],
"dependencies": {}
}



App




Just below is the code inside an app created by create-react-app




(./app/src/App.js)
import {Button} from 'jaghu';

function App() {
return (



);
}

export default App;



Code inside the create-react-app generated app's package.json




(./app/package.json)
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"react-dom": "18.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"jaghu": "../jaghu"
}
}