Error: Invalid hook call. Hooks can be called inside of the body of a function component [closed]

I got this error. When I used useState in my function. I think the error is with my versions. Can someone check it.

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: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

My Git Repo The code where I used useState:

import React, { useState } from 'react';  import './Timer.css';  import { TimerButton } from '../TimerButton/TimerButton';    export const Timer = () => {        var minutes: number = 0;      var seconds: number = 0;      const [isOn, setOn] = useState(false);        if (isOn) {          setInterval(() => {              console.log('on')          }, 1000)      };        const startTimer = () => {                }        const stopTimer = () => {        }        const resetTimer = () => {        }        return (          <div className="timer-container">              <div className="time-display">                  {minutes}:{seconds < 10 ? `0${seconds}` : seconds}              </div>              <div className="timer-button-container">                  <TimerButton                      buttonAction={startTimer}                      buttonValue={'Start'}                  />                  <TimerButton                      buttonAction={stopTimer}                      buttonValue={'Stop'}                  />                  <TimerButton                      buttonAction={resetTimer}                      buttonValue={'Reset'}                  />              </div>          </div>      );  }    

I am using my timer file here:

import React from 'react';  import './App.css';  import { Timer } from "../Timer/Timer";    const App = () => {      return (          <div className="app-container">              <Timer />          </div>      )  }        export default App;  

My package.json file:

{    "name": "timer_app",    "version": "0.1.0",    "private": true,    "dependencies": {      "@testing-library/jest-dom": "^5.11.9",      "@testing-library/react": "^11.2.3",      "@testing-library/user-event": "^12.6.0",      "@types/jest": "^26.0.20",      "@types/node": "^12.19.14",      "@types/react": "^16.14.2",      "@types/react-dom": "^16.9.10",      "react": "^16.0.0",      "react-dom": "^16.0.0",      "react-scripts": "4.0.1",      "typescript": "^4.1.3",      "web-vitals": "^0.2.4"    },    "jest": {      "collectCoverageFrom": [        "src/**/*.{js,jsx,ts,tsx}",        "!src/**/*.d.ts",        "!src/index.tsx",        "!src/serviceWorker.ts",        "!src/reportWebVitals.ts"      ],      "coveragePathIgnorePatterns": [        "./src/*/*.types.{ts,tsx}",        "./src/index.tsx",        "./src/serviceWorker.ts"      ],      "coverageReporters": [        "json",        "lcov",        "text-summary",        "clover"      ],      "coverageThreshold": {        "global": {          "statements": 95,          "branches": 95,          "lines": 95,          "functions": 95        }      },      "snapshotSerializers": [        "enzyme-to-json/serializer"      ],      "transform": {        "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/ts-jest"      },      "transformIgnorePatterns": [        "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",        "^.+\\.module\\.(css|sass|scss)$"      ],      "moduleNameMapper": {        "^react-native$": "react-native-web",        "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",        "src/(.*)$": "<rootDir>/src/$1"      }    },    "scripts": {      "start": "react-scripts start",      "build": "react-scripts build",      "test": "react-scripts test",      "test:coverage": "react-scripts test --coverage --runInBand --watchAll=false",      "eject": "react-scripts eject",      "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",      "format": "prettier --write src/**/*.{ts,tsx,scss,css,json}",      "isready": "npm run format && npm run lint && npm run test:coverage && npm run build"    },    "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": {      "@types/enzyme": "3.10.8",      "@types/enzyme-adapter-react-16": "1.0.6",      "enzyme": "3.11.0",      "enzyme-adapter-react-16": "1.15.6",      "enzyme-to-json": "3.6.1",      "jest-fetch-mock": "3.0.3",      "ts-jest": "26.4.4"    }  }  

https://stackoverflow.com/questions/65820723/error-invalid-hook-call-hooks-can-be-called-inside-of-the-body-of-a-function-c January 21, 2021 at 11:23AM