Invalid hook call in two-line functional component - react-hooks

Question

Why would this code create 'Invalid hook call'?
react and react-dom are the same version v16.8.6.
Simply calling useState triggers error?
What am I missing?
$ npm ls react react-dom
vehmain#0.1.0 /mnt/g/development/javascript/pow-vehmain
├── react#16.8.6
└── react-dom#16.8.6
Runtime:
Invalid hook call. Hooks can only be called inside of the body of a function component...
ServiceVisitMaintenance
src/components/ServiceVisit/ServiceVisitMaintenance.js:3
1 | import React, { useState } from 'react';
2 |
> 3 | const ServiceVisitMaintenance = () => {
4 | const [vehicleList, setVehicleList] = useState([]);
5 | return <div>Hello</div>;
6 | };
ServiceVisitMaintenance.js:
import React, { useState } from 'react';
const ServiceVisitMaintenance = () => {
const [vehicleList, setVehicleList] = useState([]);
return <div>Hello</div>;
};
export { ServiceVisitMaintenance };
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import * as serviceWorker from './serviceWorker';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();1
App.js
import React from 'react';
import { BaseLayout } from './BaseLayout';
import { BrowserRouter as Router } from 'react-router-dom';
const App = () => (
<Router>
<BaseLayout />
</Router>
);
export { App };
BaseLayout.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import './App.css';
import { ServiceVisitMaintenance } from './components/ServiceVisit/ServiceVisitMaintenance';
const BaseLayout = () => (
<div>
<aside>
<ul>
<li>
<Link to='/ServiceVisitMaintenance'>Service Visit</Link>
</li>
</ul>
</aside>
<article>
<Switch>
<Route path='/ServiceVisitMaintenance' exact render={ServiceVisitMaintenance} />
</Switch>
</article>
</div>
);
export { BaseLayout };

Answer 1

Change your Route props from render to component
<Route path='/ServiceVisitMaintenance' exact component={ServiceVisitMaintenance} />
Or make render a function that returns the component
<Route path='/ServiceVisitMaintenance' exact render={() => <ServiceVisitMaintenance />} />