handleSubmit with Formik using TypeScript

I have successfully written a Login component in React using plain Javascript. I would now like to convert this component to TypeScript. I have defined some types and also threw in some "any" just to initially compile. Unfortunately, the onClick parameter in my submit button throws the following error:

TS2322: Type '(e?: FormEvent | undefined) => void' is not assignable to type '(event: MouseEvent<HTMLElement, MouseEvent>) => void'.

Here is the relevant code:

class Login extends React.Component<LoginProps, LoginState> {
  constructor(props) {
    super(props);

    this.login = this.login.bind(this);
  }

  async login(values) {
    const user = {
      email: values.email,
      password: values.password,
    };

    const query = `mutation userLogin(
      $user: UserLoginInputs!
    ) {
      userLogin(
        user: $user
      ) {
        token
      }
    }`;

    const data: any = await graphQLFetch(query, { user });
    if (data && data.userLogin.token) {
      const decoded: any = jwt.decode(data.userLogin.token);
      const { onUserChange } = this.props;
      onUserChange({ loggedIn: true, givenName: decoded.givenName });
      const { history } = this.props;
      history.push('/');
    }
  }

  render() {
    return (
      <Formik
        onSubmit={this.login}
        validationSchema={loginSchema}
        initialValues={{
          email: '',
          password: '',
        }}
      >
        {({
          handleSubmit,
          handleChange,
          values,
        }) => (
          <Card>
            <Card.Body>
              <Form>
                <Form.Group>
                  <Form.Label>E-mail</Form.Label>
                  <Form.Control
                    name="email"
                    value={values.email}
                    onChange={handleChange}
                  />
                </Form.Group>
                <Form.Group>
                  <Form.Label>Password</Form.Label>
                  <Form.Control
                    name="password"
                    value={values.password}
                    onChange={handleChange}
                  />
                </Form.Group>
              </Form>
              <Button
                type="button"
                variant="primary"
                onClick={handleSubmit}
              >
                Submit
              </Button>
            </Card.Body>
          </Card>
        )}
      </Formik>
    );
  }
}

I'm new to TypeScript and don't fully understand why an error occurs regarding e versus event when the login function does not explicitly reference either of those. Can someone please help me assign types to my handleSubmit function (aka login)?