title: How to use useState hook with formik
body: <p>I am making an authentication page following a tutorial but they create an array for useState, How do set or use this inside my formik form onChange like this they did.</p>
  <pre><code>const [email, setEmail] = useState(&quot;&quot;);
  const [password, setPassword] = useState(&quot;&quot;);
  const [errorMsg, setErrorMsg] = useState(&quot;&quot;);
  const [loginUser, { data, isError, error }] = useLoginUserMutation()
  
  
  useEffect(() =&gt; {
      if (data &amp;&amp; data.access_token) {
        localStorage.setItem(
          'login',
          JSON.stringify({
            userLogin: true,
            token: data.access_token
          })
        )
        setErrorMsg('')
        setEmail('')
        setPassword('');
        navigate('/about')
      }
      if (isError) {
        setErrorMsg(error.data.message)
      }
    }, [data, isError, error])
  
      const handleLogin = async (e) =&gt; {
      e.preventDefault()
      await loginUser({ email, password })
    }
  </code></pre>
  <ol start="2">
  <li><p>The form can't read the input value when I put the onChange statement inside this formik, I get  email and password is required. It is supposed to read the value and onSubmit navigate to another page used inside the useEffect.</p>
  <pre><code>       &lt;Formik
       initialValues={{
         email: '',
         password: '',
       }}
       validationSchema={validate}
       onSubmit={handleLogin}
     &gt;
       {({ isSubmitting }) =&gt; (
         &lt;Form className='py-4'&gt;
           &lt;div&gt;
             &lt;TextField
               label='Email Address'
               name='email'
               type='email'
               value={email}
               onChange={(e) =&gt; setEmail(e.target.value)}
               placeholder='mail@company.com'
             /&gt;
           &lt;/div&gt;
  
           &lt;div className='relative'&gt;
             &lt;TextField
               label='Password'
               name='password'
               type={passwordShown ? 'text' : 'password'}
               value={password}
               onChange={(e) =&gt; setPassword(e.target.value)}
               placeholder='******'
  
             /&gt;
             &lt;i
               className='fa-solid fa-eye absolute top-[50px] right-4 cursor-pointer'
               onClick={togglePasswordVisiblity}
             &gt;&lt;/i&gt;
           &lt;/div&gt;
  
           &lt;div className='remember flex justify-between justify-items-center my-4'&gt;
             &lt;div className='check gap-2 flow-root'&gt;
               &lt;input type='checkbox' name='rememberMe' id='remeberMe' /&gt;{' '}
               Remember me
             &lt;/div&gt;
             &lt;Link
               to='/ForgetPassword'
               className='underline hover:underline hover:text-black'
             &gt;
               {' '}
               Forget your password{' '}
             &lt;/Link&gt;
           &lt;/div&gt;
  
           &lt;button
             type='submit'
             disabled={isSubmitting}
             className='border-0 py-2
             rounded hover:bg-[#0559FD]
             w-full bg-[#AAAAAA] text-white'
           &gt;
             {' '}
             Log in{' '}
           &lt;/button&gt;
         &lt;/Form&gt;
       )}
     &lt;/Formik&gt;
  </code></pre>
  </li>
  </ol>