I'm trying to resolve an issue with an invalid hook call when using react-router-dom, particularly that importing BrowserRouter as Router, Route and encasing it like so:

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import 'semantic-ui-css/semantic.min.css'
import './App.css'

import Home from './pages/Home'
import Register from './pages/Register'
import Login from './pages/Login'
import MenuBar from './components/MenuBar'

export default function App() {
  return (
    <Router>
     <MenuBar />
     <Route path='/'>
       <Home />
     </Route>
     <Route path='/login'>
       <Login />
     </Route>
     <Route path='/register'>
       <Register />
     </Route>
    </Router>
  );
}

Gives me the error: Invalid Hook Call

My index.js looks like:

import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import ApolloProvider from './ApolloProvider'

ReactDOM.render(
  ApolloProvider,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

and my ApolloProvider like so:

import React from 'react'
import App from './App'
import ApolloClient from 'apollo-client'
import {InMemoryCache} from 'apollo-cache-inmemory'
import {createHttpLink} from 'apollo-link-http'
import {ApolloProvider} from '@apollo/react-hooks'

const httpLink = createHttpLink({
    uri: 'http://localhost:5000'
})

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
})

export default (
    <ApolloProvider client={client}>
        <App/>
    </ApolloProvider>
)

I can't quite figure out why I'm seeing an error. I don't have any hooks in any of these files. Any help is appreciated!