Unable to pass history from a module npm history to react router's BrowserRouter

I have installed a third party module using npm i history I am using history 5.0.0 and react-router-dom 5.2.0. I am trying to pass that history to my Router wrapper, but I am unable to do so. Here are my components:

import React from 'react';
// import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { Router, Route, Switch } from 'react-router-dom'
import { createBrowserHistory } from 'history';
import ExpenseDashboardPage from '../components/ExpenseDashboardPage'
import AddExpensePage from '../components/AddExpensePage'
import EditExpensePage from '../components/EditExpensePage'
import HelpPage from '../components/HelpPage'
import NotFoundPage from '../components/NotFoundPage'
import Header from '../components/Header'
import LoginPage from '../components/LoginPage'

export let history = createBrowserHistory()


const AppRouter = () => (
    <Router history={history}>
        <div>
            <Header />
            <Switch>
                <Route exact path='/' component={LoginPage} />
                {/* <Route exact path='/' render={routerProps => <LoginPage {...routerProps} history={history} />} /> */}
                <Route path='/dashboard' component={ExpenseDashboardPage} />
                <Route path='/create' component={AddExpensePage} />
                <Route path='/edit/:id' component={EditExpensePage} />
                <Route path='/help' component={HelpPage} />
                <Route component={NotFoundPage} />
            </Switch>
        </div>
    </Router>
)

export default AppRouter

Here is my app component, this is where I am trying to navigate to the login page after logging out:

import React from 'react';
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import AppRouter, { history } from './routers/AppRouter'
import configureStore from './store/configureStore'
import { startSetExpenses } from './actions/expenses'
import 'normalize.css/normalize.css'
import './styles/styles.scss'
import 'react-dates/lib/css/_datepicker.css'
// import firebase from 'firebase/app';
import { firebase } from './firebase/firebase'
// import history from 'history/browser'


const store = configureStore()
console.log('test')

const jsx = (
    <Provider store={store}>
        <AppRouter />
    </Provider>
)



ReactDOM.render(<p>Loading...</p>, document.getElementById('app'))

store.dispatch(startSetExpenses()).then(() => {
    ReactDOM.render(jsx, document.getElementById('app'))
})

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        console.log('log in');
    }
    else {
        console.log('log out');
        history.push('/') //trying to make this push to the login page
    }
})

Using Router rather than BrowserRouter also breaks all my NavLinks in my header component, I've tried using withRouter to fix it, but it still doesn't work. Here is my header component:

import React from 'react';
import { NavLink, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { startLogout } from '../actions/auth'

export const Header = ({ startLogout }) => (
    <header>
        <h1>Expensify</h1>
        <NavLink to="/dashboard" exact activeClassName="is-active">Dashboard</NavLink>
        <NavLink to='/create' activeClassName="is-active">Create Expense</NavLink>
        <button onClick={startLogout}>Logout</button>
    </header>
)

const mapDispatchToProps = (dispatch) => ({
    startLogout: () => dispatch(startLogout())
})

export default withRouter(connect(undefined, mapDispatchToProps)(Header))

Please tell me what I am doing wrong, and how I can fix it.