title: Not able to set initial values of formik form?
body: <p>I have created a formik form that gets its initial values from the backend database through API calls. Got below error:</p>
  <blockquote>
  <p>Type 'undefined' is not assignable to type 'FormikValues'.  TS2322</p>
  </blockquote>
  <p>Not able to resolve the error.</p>
  <p>code:</p>
  <pre><code>// @ts-ignore
  
  import React, { useState, useEffect } from 'react';
  import { Formik, Form, Field } from 'formik';
  import {
    Typography,
    Button,
    Grid,
    CircularProgress,
    Divider,
  } from '@material-ui/core';
  import * as Yup from 'yup';
  import { MyInput } from './comman/MyInput';
  import axios from 'axios'
  import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';
  import Unsubscribed from './Unsubscribed';
  
  const contactSchema = Yup.object().shape({
    });
  export default function SurveyUnsubscribed(props: any) {
    const [isSubmitted, setIsSubmitted] = useState(false);
    //const [color, setColor] = useState(true);
    const [loading, setLoading] = useState(false);
    const [count, setCount] = useState(0);
    const [countone, setCountOne] = useState(0);
    const [counttwo, setCountTwo] = useState(0);
    const [countthree, setCountThree] = useState(0);
    const [initialValues, setInitialValues] = useState();
  
    const [state, setState] = useState({
      msg: '',
    });
    let initial:any;
    
  async function getInitialValues() {
    try{
      const response = await axios.get(`${process.env.REACT_APP_LOCALHOST_DEVELOPMENT_VOTING_API_GET}`)
      return response.data;
        }catch(error){
      console.error(error)
    }
  }
  
  
    useEffect(() =&gt; {
      getInitialValues().then((res:any) =&gt; setInitialValues(res));
  
      }, []);
  
  
    const handleClickCount = () =&gt; {
      setCount(count + 1);
      // setColor(false);
    };
    const handleClickCountTwo = () =&gt; {
      setCountTwo(counttwo + 1);
      // setColor(false);
    };  const handleClickCountThree = () =&gt; {
      setCountThree(countthree + 1);
      // setColor(false);
    };  const handleClickCountOne = () =&gt; {
      setCountOne(countone + 1);
      // setColor(false);
    };
    return (
      &lt;React.Fragment&gt;
        &lt;Formik
          enableReinitialize
          initialValues={initialValues}
            // count: initial,
            // countone: countone,
            // counttwo: counttwo,
            // countthree: countthree,
            // helptext: '',
          
          validationSchema={contactSchema}
          onSubmit={(values, { resetForm }) =&gt; {
            setLoading(true);
            console.log(initial)
          
            const data = {
              count: values.count,
              countone: values.countone,
              counttwo: values.counttwo,
              countthree: values.countthree,
              helptext: values.helptext,
            };
            console.log(data);
            const request = new Request(
              `${process.env.REACT_APP_LOCALHOST_DEVELOPMENT_VOTING_API}`,
              {
                method: 'POST',
                headers: new Headers({
                  'Content-Type': 'application/json',
                }),
                body: JSON.stringify(data),
              },
            );
  
            fetch(request)
              .then((res) =&gt; res.json())
              .then((data) =&gt; {
                if (data.message === 'Thank you for your feedback!') {
                  setState({
                    msg: data.message,
                  });
                  setIsSubmitted(true);
                  setTimeout(() =&gt; {
                    setLoading(false);
                  }, 1500);
                } else {
                  console.log('error');
                }
              });
            setTimeout(() =&gt; {
              setIsSubmitted(false);
            }, 1500);
  
            resetForm();
          }}
        &gt;
          {({ setFieldValue }) =&gt; (
            &lt;Grid container&gt;
              &lt;Grid
                item
                xs={12}
                style={{ paddingLeft: '2em', paddingRight: '2em' }}
              &gt;
                &lt;Typography
                  variant=&quot;h6&quot;
                  style={{
                    marginTop: '1em',
                    color: '#2F4858',
                    fontWeight: 'bold',
                  }}
                &gt;
      Voting survey          &lt;/Typography&gt;
                &lt;br /&gt;
                {isSubmitted}
                &lt;Form&gt;
                  &lt;Typography
                    variant=&quot;body1&quot;
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      marginBottom: '1em',
                    }}
                  &gt;
                    &lt;Field type=&quot;hidden&quot; name=&quot;count&quot; component={ThumbUpAltIcon}  onClick={handleClickCount} style={{ color: '#C4C4C4', marginRight: '0.4em' }}/&gt;
                    &lt;Typography
                      variant=&quot;caption&quot;
                      style={{
                        position: 'relative',
                        top: '1.5em',
                        right: '1.5em',
                      }}
                    &gt;
                      {count}
                    &lt;/Typography&gt;
     A             &lt;/Typography&gt;
  
                  &lt;Typography
                    variant=&quot;body1&quot;
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      marginBottom: '1em',
                    }}
                  &gt;
                    &lt;Field type=&quot;hidden&quot; name=&quot;countone&quot; component={ThumbUpAltIcon}  onClick={handleClickCountOne} style={{ color: '#C4C4C4', marginRight: '0.4em' }}/&gt;
                    &lt;Typography
                      variant=&quot;caption&quot;
                      style={{
                        position: 'relative',
                        top: '1.5em',
                        right: '1.5em',
                      }}
                    &gt;
                      {countone}
                    &lt;/Typography&gt;
    B              &lt;/Typography&gt;
  
                  &lt;Typography
                    variant=&quot;body1&quot;
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      marginBottom: '1em',
                    }}
                  &gt;
                    &lt;Field type=&quot;hidden&quot; name=&quot;counttwo&quot; component={ThumbUpAltIcon}  onClick={handleClickCountTwo} style={{ color: '#C4C4C4', marginRight: '0.4em' }}/&gt;
                    &lt;Typography
                      variant=&quot;caption&quot;
                      style={{
                        position: 'relative',
                        top: '1.5em',
                        right: '1.5em',
                      }}
                    &gt;
                      {counttwo}
                    &lt;/Typography&gt;
   C               &lt;/Typography&gt;
  
                  &lt;Typography
                    variant=&quot;body1&quot;
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      marginBottom: '1em',
                    }}
                  &gt;
                    &lt;Field type=&quot;hidden&quot; name=&quot;countthree&quot; component={ThumbUpAltIcon}  onClick={handleClickCountThree} style={{ color: '#C4C4C4', marginRight: '0.4em' }}
                     /&gt;
   
                    &lt;Typography
                      variant=&quot;caption&quot;
                      style={{
                        position: 'relative',
                        top: '1.5em',
                        right: '1.5em',
                      }}
                    &gt;
                      {countthree}
                    &lt;/Typography&gt;
  D
                  &lt;/Typography&gt;
  
                  &lt;br /&gt;
                  &lt;Typography
                    variant=&quot;h6&quot;
                    style={{
                      marginLeft: '2em',
                      marginTop: '0.5em',
                    }}
                  &gt;
                    What information would help you ?
                  &lt;/Typography&gt;
                  &lt;Field
                    id=&quot;outlined-multiline-flexible&quot;
                    type=&quot;text&quot;
                    name=&quot;helptext&quot;
                    component={MyInput}
                    disabled={isSubmitted}
                    style={{ marginLeft: '2em' }}
                  /&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;Button
                      type=&quot;submit&quot;
                      variant=&quot;contained&quot;
                   
                      style={{
                      background: '#2F4858',
                      color: 'white',
                      fontFamily: 'roboto',
                      fontSize: '1rem',
                      marginLeft: '2em',
                      marginBottom: '1em',
                    }}
                  &gt;
                    {loading &amp;&amp; (
                      &lt;CircularProgress
                        size={25}
                        color=&quot;inherit&quot;
                        style={{ marginRight: '5px' }}
                      /&gt;
                    )}
                    {loading &amp;&amp; &lt;span&gt;submitting&lt;/span&gt;}
                    {!loading &amp;&amp; &lt;span&gt;Submit&lt;/span&gt;}
                  &lt;/Button&gt;
                  &lt;br /&gt;
                  {state.msg &amp;&amp; (
                    &lt;Typography
                      variant=&quot;h6&quot;
                      style={{
                        color: '#4BB543',
                        fontFamily: 'roboto-medium',
                        marginTop: '1em',
                      }}
                    &gt;
                      {' '}
                      {state.msg}{' '}
                    &lt;/Typography&gt;
                  )}
                &lt;/Form&gt;
                &lt;Divider
                  style={{
                    border: '1px solid #97A1A8',
                    marginTop: '1em',
                    marginBottom: '2em',
                  }}
                /&gt;
                &lt;Unsubscribed /&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          )}
        &lt;/Formik&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>
  <p>please guys help me with setting <code>formik</code> <strong>initial values</strong> from the database(Postgresql)</p>