React Router history.push undefined

Programação
,
#1

Boa noite pessoal, estou com um problema aqui no meu this.props.history.push(’/home’) onde ele não está conseguindo seguir para a minha próxima rota depois que efetua o login, meu código está assim

import React, { useState } from 'react';

import * as S from './styles';

import './index.css';
import axios from 'axios';
import { Link } from 'react-router-dom';
const url = 'http://localhost:3020/api/v1/login/';

export default function Login() {
  const [item, setItem] = useState();
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();

  async function logar(e) {
    e.preventDefault()
    const obj = {
      email: email,
      password: password
    }
    await axios.post(url, obj)
      .then(response => {
        setItem(response.data)
        localStorage.setItem('@guarda-local/token', response.data.token)
        this.props.history.push('/home');
        console.log('Token => ' + item.token);
      })
      .catch(error => {
        console.log(error);
        alert('xiiii deu erro')
      })
  }

  return (
    <S.Container>
      <S.Card>
        <form className='row col-12 mt-4'>
          <h4>Faça o seu login</h4>
          <div className='form-group col-12'>
            <label>Email</label>
            <input value={email} id='email' type='email'
              onChange={(e) => setEmail(e.target.value)}
              placeholder='Insira o seu email...'
              className='form-control' required />
          </div>
          <div className='form-group col-12'>
            <label>Senha</label>
            <input value={password} type='password' id='senha'
              onChange={(e) => setPassword(e.target.value)}
              placeholder='Insira a sua senha...'
              className='form-control col-12' required />
          </div>
          <S.ButtonPosition>
            <button to='/home'
              onClick={logar} className='btn btn-primary mt-4'>
              Login
          </button>
          </S.ButtonPosition>
        </form>
      </S.Card>
    </S.Container>
  )
}

Minhas Rotas estão assim:

import React from 'react';
//Components
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
//services
import { isAuthenticated } from '../services/servicePrivate';
//Pages
import Home from '../view/home';
import Login from '../view/login/';
import Teste from '../view/teste';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest}
    render={props =>
      isAuthenticated('@guarda-local/token') != null ? (
        <Component {...props} />
      ) : (
          <Redirect to={{ pathname: "/", state: { from: props.location } }} />
        )}
  />
)

const Routes = () => (
  <BrowserRouter>
    <Switch>
      <PrivateRoute exact path={'/home'} component={Home} />
      <Route exact path={'/teste'} component={Teste} />
      {isAuthenticated('@guarda-local/token') === null || isAuthenticated('@guarda-local/token') === '' ? (
        <Route exact path={'/'} component={Login} />
      ) : ' '}
    </Switch>
  </BrowserRouter>
)
export default Routes;

Alguém sabe me dizer como arrumar? Debugando ele guarda o token, faz tudo certinho, se eu colocar /home e o token for valido eu consigo acessar a minha outra pagina caso contrário eu não consigo ter acesso. A lógica creio eu que está certa só preciso fazer esse redirecionamento para home, sempre utilizei o this.props.history.push e sempre funcionou.

#2

Resolvi o meu problema utilizando Class, mas eu queria saber como faço para funcionar com Hooks.