title: isSubmitting is not defined in Reactjs Formik library?
body: <p>I am trying to keep a track of form submission to display a circular progress until the form has submitted. </p>
  
  <p>According to formik documentation, i can use isSubmitting variable to to do that but i am getting error "Uncaught ReferenceError: isSubmitting is not defined"</p>
  
  <p>this is being writting in reactjs with laravel as backend</p>
  
  <pre><code>import React, {
      useState,
      useContext,
      useEffect,
      useCallback,
      useMemo
  } from "react";
  import CircularProgress from "@material-ui/core/CircularProgress";
  import axios from "axios";
  import {
      makeStyles,
      InputLabel,
      MenuItem,
      FormHelperText,
      FormControl,
      Avatar,
      Select,
      Typography,
      Divider,
      TextField
  } from "@material-ui/core";
  import SaveIcon from "@material-ui/icons/Save";
  import Button from "@material-ui/core/Button";
  import { Formik, Field, Form, ErrorMessage } from "formik";
  import * as Yup from "yup";
  
  const useStyles = makeStyles(theme =&gt; ({
      formControl: {
          marginTop: 16,
          minWidth: "100%"
      },
      selectEmpty: {},
      button: {
          width: 200
      },
      bigAvatar: {
          margin: 10,
          width: 120,
          height: 120
      }
  }));
  let loading=false;
  function storeUserProfile(values) {
      loading=true;
      let res = axios
          .post("http://localhost:8000/userprofile", values)
          .then(response =&gt; {
              console.log(response);
          })
          .catch(excepion =&gt; {
              console.log(exception);
          })
          .finally(function () {
  
              loading=false;
              console.log('loadingajax:'+loading)
            });
  }
  export default function UserProfile() {
     // const [loading, setloading] = useState();
      const classes = useStyles();
  
      useEffect(() =&gt; {
  
      }, []);
  
      return (
          &lt;&gt;
              &lt;Formik
                      initialValues={{
                      fullname: "asdasd",
                      fathername: "asdasdasdad",
                      email: "asdas@as.com",
                      identitynumber: "123123",
                      usergender: ""
                  }}
                  validationSchema={Yup.object({
                      fullname: Yup.string()
                          .min(4, "Must be 15 characters or less")
                          .required("Required"),
                      fathername: Yup.string()
                          .min(4, "Must be 20 characters or less")
                          .required("Required"),
                      email: Yup.string()
                          .email("Invalid email addresss`")
                          .required("Required"),
                      identitynumber: Yup.string()
                          .max(15, "Must be 15 characters in length")
                          .required("Required")
                  })}
                  onSubmit={(values, { setSubmitting }) =&gt; {
                      console.log(isSubmitting)
                      setTimeout(() =&gt; {
                          //alert(JSON.stringify(values, null, 2));
                          setSubmitting(false);
                          storeUserProfile(values);
                      }, 400);
                  }}
              &gt;
                  {formik =&gt; (
                      &lt;Form onSubmit={formik.handleSubmit}&gt;
                          &lt;div className="container-fluid shadow p-3"&gt;
                              &lt;div className="UserImage col-12 "&gt;
                                  &lt;Avatar
                                      alt="profile Picture"
                                      src="/images/default_dp.jpg"
                                      className={classes.bigAvatar}
                                  /&gt;
                                  &lt;Button
                                      variant="text"
                                      color="primary"
                                      size="small"
                                  &gt;
                                      Change
                                  &lt;/Button&gt;
                              &lt;/div&gt;
  
                              &lt;div className="row"&gt;
                                  &lt;div className="col-6"&gt;
                                      &lt;TextField
                                          fullWidth
                                          requried
                                          error={formik.touched.fullname &amp;&amp; formik.errors.fullname &amp;&amp; true}
                                          id="fullname"
                                          className={""}
                                          label="Full Name"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps("fullname")}
                                      /&gt;
                                      &lt;ErrorMessage name="fullname" /&gt;
  
                                  &lt;/div&gt;
                                  &lt;div className="col-6"&gt;
                                      &lt;TextField
                                          fullWidth
                                          requried
                                          id="fathername"
                                          error={
                                              formik.touched.fathername &amp;&amp;
                                              formik.errors.fathername
                                          }
                                          className={""}
                                          label="Father Name"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps("fathername")}
                                      /&gt;
                                     &lt;ErrorMessage name="fathername" /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-6"&gt;
                                      &lt;TextField
                                          fullWidth
                                          requried
                                          error={
                                              formik.touched.email &amp;&amp;
                                              formik.errors.email
                                          }
                                          id="email"
                                          className={""}
                                          label="Email Address"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps("email")}
                                      /&gt;
                                      &lt;ErrorMessage name="email" /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-6"&gt;
                                      &lt;TextField
                                          fullWidth
                                          required
                                          id="identitynumber"
                                          error={
                                              formik.touched.identitynumber &amp;&amp;
                                              formik.errors.identitynumber ==true
                                          }
                                          className={""}
                                          label="NIC / Passport Number"
                                          helperText=""
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps(
                                              "identitynumber"
                                          )}
                                      /&gt;
                                      &lt;ErrorMessage name="identitynumber" /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-6"&gt;
                                      &lt;TextField
                                          fullWidth
                                          id="contactnumber"
                                          className={""}
                                          label="Contact Number"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps(
                                              "contactnumber"
                                          )}
                                      /&gt;
                                      &lt;ErrorMessage name="contactnumber" /&gt;
                                  &lt;/div&gt;
  
                                  &lt;div className="col-6"&gt;
                                      &lt;FormControl
                                          variant="outlined"
                                          className={classes.formControl}
                                      &gt;
                                          &lt;InputLabel id="user-gender-label"&gt;
                                              Gender
                                          &lt;/InputLabel&gt;
                                          &lt;Select
                                              labelId="user-gender-label"
                                              id="usergender"
                                              //value={category}
                                              labelWidth={200}
                                              fullWidth
                                              {...formik.getFieldProps(
                                                  "usergender"
                                              )}
                                          &gt;
                                              &lt;MenuItem value=""&gt;
                                                  &lt;em&gt;None&lt;/em&gt;
                                              &lt;/MenuItem&gt;
                                              &lt;MenuItem value="Male"&gt;
                                                  &lt;em&gt;Male&lt;/em&gt;
                                              &lt;/MenuItem&gt;
                                              &lt;MenuItem value="Female"&gt;
                                                  &lt;em&gt;Female&lt;/em&gt;
                                              &lt;/MenuItem&gt;
                                              &lt;MenuItem value="Other"&gt;
                                                  &lt;em&gt;Other&lt;/em&gt;
                                              &lt;/MenuItem&gt;
                                          &lt;/Select&gt;
                                          &lt;ErrorMessage name="usergender" /&gt;
                                      &lt;/FormControl&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-6"&gt;
                                      &lt;TextField
                                          fullWidth
                                          id="Nationality"
                                          className={""}
                                          label="Nationality"
                                          helperText="e.g Pakistani"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps("Nationality")}
                                      /&gt;
                                      &lt;ErrorMessage name="nationality" /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-12"&gt;
                                      &lt;TextField
                                          fullWidth
                                          id="address"
                                          className={""}
                                          label="Address"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps("address")}
                                      /&gt;
                                      &lt;ErrorMessage name="address" /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-4"&gt;
                                      &lt;TextField
                                          fullWidth
                                          id="city"
                                          className={""}
                                          label="City"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps("city")}
                                      /&gt;
                                      &lt;ErrorMessage name="city" /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-4"&gt;
                                      &lt;TextField
                                          fullWidth
                                          id="district"
                                          className={""}
                                          label="District"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps("district")}
                                      /&gt;
                                      &lt;ErrorMessage name="district" /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-4"&gt;
                                      &lt;TextField
                                          fullWidth
                                          id="province"
                                          className={""}
                                          label="Province"
                                          margin="normal"
                                          variant="outlined"
                                          {...formik.getFieldProps("province")}
                                      /&gt;
                                      &lt;ErrorMessage name="province" /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-12"&gt;
                                      &lt;Button
                                          variant="contained"
                                          color="primary"
                                          size="large"
                                          type="submit"
                                          fullWidth
                                          className={classes.button}
                                          startIcon={&lt;SaveIcon /&gt;}
                                      &gt;
                                          Save
                                      &lt;/Button&gt;
                                      &lt;React.Fragment&gt;'
                                         {isSubmitting   ? (
                                              &lt;CircularProgress
                                                  color="inherit"
                                                  size={20}
                                              /&gt;
                                          ) : null}
                                      &lt;/React.Fragment&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/Form&gt;
                  )}
              &lt;/Formik&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  
  <p>isSubmitting should be accessible</p>