Problem with a Mutation from Apollo-Client - reactjs

Question

I am trying to perform a Login with JSON web tokens. Right now I am doing a simple thing, I just want to give a username and a password and, if they are correct ,as a response I want a console log with the token.
Instead of receiving a token in the console, all I get is the http-address changing from http:/localhost:3000/login to http:/localhost:3000/login?username=username&password=password
Can somebody explain me why does that happen?
Here is my code:
import React, {useState} from 'react';
import {gql} from 'graphql-tag';
import {Mutation} from 'react-apollo';
import {Button, TextField} from '#material-ui/core';
const LOGIN = gql`
mutation Login($username: String!, $password:String!){
login(username:$username, password:$password){
token
}
}
`;
export default function Login(){
const [formState, setFormState] = useState({
values:{}
})
};
const handleChange = event => {
event.persist();
setFormState( formState => ({
...formState,
values:{
...formState.values,
[event.target.name]:event.target.value
}
}));
};
const handleSubmit = async(event, login)=>{
event.preventDefault();
console.log(formState.values)
login().then(async({data}) => {
localStorage.setItem('token', data.login.token);
})
.catch(function(e){
console.log('Something went wrong');
});
console.log(localStorage.getItem('token'));
}
return (
<Mutation mutation={LOGIN} variables={{username:formState.values.username, password: formState.values.password }}>
{(login, {data}) => (
<div>
<form className="form" onSubmit={handleSubmit, login}>
<TextField
label="Username"
name="username"
onChange={handleChange}
value=formState.values.username
></TextField>
<TextField
label="Password"
name="password"
onChange={handleChange}
value=formState.values.password
></TextField>
<Button type="submit">Login</Button>
</form>
</div>
)}</Mutation>
);
I would like to know where my error is, I am new to React and Javascript