title: handleSubmit with Formik using TypeScript
body: <p>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 &quot;any&quot; just to initially compile. Unfortunately, the onClick parameter in my submit button throws the following error:</p>
  <p><em>TS2322: Type '(e?: FormEvent | undefined) =&gt; void' is not assignable to type '(event: MouseEvent&lt;HTMLElement, MouseEvent&gt;)
  =&gt; void'.</em></p>
  <p>Here is the relevant code:</p>
  <pre><code>class Login extends React.Component&lt;LoginProps, LoginState&gt; {
    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 &amp;&amp; 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 (
        &lt;Formik
          onSubmit={this.login}
          validationSchema={loginSchema}
          initialValues={{
            email: '',
            password: '',
          }}
        &gt;
          {({
            handleSubmit,
            handleChange,
            values,
          }) =&gt; (
            &lt;Card&gt;
              &lt;Card.Body&gt;
                &lt;Form&gt;
                  &lt;Form.Group&gt;
                    &lt;Form.Label&gt;E-mail&lt;/Form.Label&gt;
                    &lt;Form.Control
                      name=&quot;email&quot;
                      value={values.email}
                      onChange={handleChange}
                    /&gt;
                  &lt;/Form.Group&gt;
                  &lt;Form.Group&gt;
                    &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                    &lt;Form.Control
                      name=&quot;password&quot;
                      value={values.password}
                      onChange={handleChange}
                    /&gt;
                  &lt;/Form.Group&gt;
                &lt;/Form&gt;
                &lt;Button
                  type=&quot;button&quot;
                  variant=&quot;primary&quot;
                  onClick={handleSubmit}
                &gt;
                  Submit
                &lt;/Button&gt;
              &lt;/Card.Body&gt;
            &lt;/Card&gt;
          )}
        &lt;/Formik&gt;
      );
    }
  }
  </code></pre>
  <p>I'm new to TypeScript and don't fully understand why an error occurs regarding <em>e</em> versus <em>event</em> when the login function does not explicitly reference either of those. Can someone please help me assign types to my handleSubmit function (aka login)?</p>