title: React Formik onSubmit RestAPI called twice, once click a submit button
body: <p>I'm using Formik and Yup in react, when I click submit button and the onSubmit event firing, And inside of the event the fetch function called twice, </p>
  
  <pre><code>import React, { Component } from 'react';
  import Button from '@material-ui/core/Button';
  import Container from '@material-ui/core/Container';
  import { TextField } from 'formik-material-ui';
  import { Formik, Field, Form } from 'formik';
  import * as Yup from 'yup';
  class LoginForm extends Component {
      constructor(props) {
          super(props);
          this.state = {classes: this.props.classes, isLoading: false }
      }
  render() {
     return (
          &lt;Formik
              initialValues={initialFormValues}
              validationSchema={validationFrom}
              onSubmit={(values, actions) =&gt; {
                  this.setState({ isLoading: true });
                  console.log(values);
                  actions.setSubmitting(false);
                  console.log('SUCCESS!! :-)\n\n' + JSON.stringify(values, null, 2));
  
                  fetch('http://xx.xx.xx.xx.compute-1.amazonaws.com:9000/api/v1/userAuth', {
                      method: 'POST',
                      headers: {
                          'Accept': 'application/json',
                          'Content-Type': 'application/json',
                      },
                      body: JSON.stringify(values)
                  })
                      .then(Response =&gt; {
                          console.log(Response);
                          this.setState({ isLoading: false });
                      })
                 }
              }
              render={({ submitForm, isSubmitting, isValid }) =&gt; (
                  &lt;Form&gt;
                      &lt;Container component="main" maxWidth="xs" &gt;
                          &lt;div className={this.state.classes.paper}&gt;
                              &lt;Field
                                  variant="outlined" margin="normal" fullWidth label="User ID" name="userid" id="userid" type="text"
                                  autoComplete="userid" component={TextField} /&gt;
                              &lt;Field
                                  variant="outlined" margin="normal" fullWidth id="password" name="password" label="Password" type="password"
                                  autoComplete="current-password" component={TextField} /&gt;
  
                              &lt;Button
                                  type="submit" fullWidth variant="contained" color="primary"
                                      className={this.state.classes.submit} disabled={isSubmitting || !isValid}
                                  &gt; Sign In
                              &lt;/Button&gt;
                          &lt;/div&gt;
                      &lt;/Container&gt;
                  &lt;/Form&gt;
              )}
          /&gt;
      )
   }
  }
  export default LoginForm;
  </code></pre>
  
  <p>I'm new to React, I have google it but no luck, Here is my tried code, I called the API for user Authentication to verify userId and password, Please suggest me to do correct way to call API. </p>
  
  <p><a href="https://i.stack.imgur.com/REIlq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/REIlq.png" alt="enter image description here"></a></p>