Invalid hook call in two-line functional component

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 />} />