Erro history.push

Front-end JavaScript
#1

Estou com um erro aqui que não estou entendendo o porquê dele, alguém poderia me ajudar?

import React from 'react';
import './styles.css';
import { useHistory } from 'react-router-dom';

const history = useHistory([]);

function SignIn(){
history.push('/login')
}
const NavBarWelcome = () => {   
return(
    <nav className="navbar navbar-expand-lg navbar-dark bg-" styles="">
  <div className="inventory">
<a className="navbar-brand">Inventory Control</a>
</div>
<div className="signin">
<button type="submit" class="btn btn-primary" onClick={SignIn}>Entrar</button>
</div>
<div className="signup">
<button type="submit" class="btn btn-primary">Cadastrar-se</button>
</div>
</nav>
)
}

export default NavBarWelcome;

O erro que dá:

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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.