I can't seem to be able to use hooks in react - reactjs

Question

I'm starting a new react app. So far, nothing weird has been added. This is how my package.json looks like:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"fibers": "^5.0.0",
"jquery": "^3.5.0",
"moment": "^2.24.0",
"node-sass": "^4.14.0",
"popper": "^1.0.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-moment": "^0.9.7",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-thunk": "^1.0.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"sass": "^1.26.5",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Then I try the most simple of react hooks call within a component:
import React, { useState } from 'react';
const Gallery = () => {
const [test, setTest] = useState(null);
return <div>Gallery</div>;
};
export default Gallery;
But when I try to run it, I get:
Error: 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 https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and
fix this problem.
The package.json seems to be ok. No duplicate react versions. React is 16.8+. And the component is a functional component, not a class-based one. What could I be missing?
NOTE: When I try to run the "npm ls react" suggested in the documentation, I get no versions listed. react-dom appears correctly. Could this be the cause? And if so, any ideas of how to fix it?

Answer 1

Problem, can be using different version of react & react-dom dependencies
If you are using react-router-dom and have Routes like this
return (
<Router>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/gallery" render={Gallery} exact />
</Switch>
</Router>
);
Here, instead of <Route path="/gallery" render={Gallery} exact /> use this <Route path="/gallery" component={Gallery} />
That, solved my problem