title: Formik + Chakra UI input Number don't work
body: <p>When I use Formik with Chakra input element the code don't work. If I use a normal input, the value of formik works fine, but when I use number input and set the initial values in Formik the number frozen. I try set in initial values a string, a number a string converted in Number but the results still the same. I found other old question about this, but haven't a right reply. Below follow my code:</p>
  <pre><code>import { useFormik } from 'formik';
  import * as yup from 'yup';
  import { useRouter } from 'next/router';
  import { useEffect } from 'react';
  
      import {
        Link,
        Container,
        Box,
        Input,
        Button,
        Text,
        FormControl,
        FormLabel,
        FormHelperText,
        InputGroup,
        InputLeftAddon,
        isSubmitting,
        NumberInput,
        NumberInputField,
        NumberInputStepper,
        NumberIncrementStepper,
        NumberDecrementStepper,
      } from '@chakra-ui/react';
      
      import { useAuth } from '../';
      
      const validationSchema = yup.object().shape({
        email: yup
          .string()
          .email('E-mail inválido')
          .required('Preenchimento obrigatório'),
        password: yup.string().required('Preenchimento obrigatório'),
        username: yup.string().required('Preenchimento obrigatório'),
        prefixo: yup.string().required('Preenchimento obrigatório'),
      });
      
      export default function SignUp() {
        const [auth, { signup }] = useAuth();
        const router = useRouter();
      
        const {
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
        } = useFormik({
          // eslint-disable-next-line no-shadow
          onSubmit: (values) =&gt; {
            alert(JSON.stringify(values, null, 2));
          },
      
          validationSchema,
          initialValues: {
            email: '',
            password: '',
            username: '',
            prefixo: Number(''),
          },
        });
      
        useEffect(() =&gt; {
          auth.user &amp;&amp; router.push('/agenda');
        }, [auth.user, router]);
      
        return (
          &lt;Box
            bg='var(--color-primary-dark)'
            w='100%'
            h='100vh'
            justifyContent='center'
            d='flex'
            alignItems='center'
          &gt;
            &lt;Container p={4} w='100vh' centerContent&gt;
              &lt;Box p={4} mt={8}&gt;
                &lt;Text color=' white' fontSize='4rem' fontFamily='Rajdhani'&gt;
                  Crie seu cadastro como Tio(a)
                &lt;/Text&gt;
              &lt;/Box&gt;
              &lt;Box w='100%' d='grid' gridTemplateColumns='1fr 1fr'&gt;
                &lt;FormControl id='email' p={4} isRequired&gt;
                  &lt;FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'&gt;
                    Email
                  &lt;/FormLabel&gt;
                  &lt;Input
                    color='white'
                    textColor='whiteAlpha.900'
                    fontSize='2xl'
                    fontFamily='Poppins'
                    size='lg'
                    type='email'
                    height='3.5em'
                    value={values.email}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  /&gt;
                  {touched.email &amp;&amp; (
                    &lt;FormHelperText
                      fontSize='1.0em'
                      fontFamily='Poppins'
                      textColor='#e74c3c'
                    &gt;
                      {errors.email}
                    &lt;/FormHelperText&gt;
                  )}
                &lt;/FormControl&gt;
      
                &lt;FormControl id='password' p={4} isRequired&gt;
                  &lt;FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'&gt;
                    Senha
                  &lt;/FormLabel&gt;
                  &lt;Input
                    textColor='whiteAlpha.900'
                    fontSize='2xl'
                    size='lg'
                    type='password'
                    height='3.5em'
                    value={values.password}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  /&gt;
                  {touched.password &amp;&amp; (
                    &lt;FormHelperText
                      fontSize='1.0em'
                      fontFamily='Poppins'
                      textColor='#e74c3c'
                    &gt;
                      {errors.password}
                    &lt;/FormHelperText&gt;
                  )}
                &lt;/FormControl&gt;
      
                &lt;FormControl id='prefixo' p={4} isRequired&gt;
                  &lt;FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'&gt;
                    Prefixo
                  &lt;/FormLabel&gt;
                  &lt;NumberInput
                    type='prefixo'
                    name='prefixo'
                    size='lg'
                    value={values.prefixo}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    min={1}
                    max={250}
                    allowMouseWheel
                  &gt;
                    &lt;NumberInputField
                      textColor='whiteAlpha.900'
                      fontFamily='Poppins'
                      fontSize='2xl'
                      height='3.5em'
                    /&gt;
      
                    &lt;NumberInputStepper&gt;
                      &lt;NumberIncrementStepper
                        bg='green.200'
                        _active={{ bg: 'green.300' }}
                      /&gt;
                      &lt;NumberDecrementStepper
                        bg='pink.200'
                        _active={{ bg: 'pink.300' }}
                      /&gt;
                    &lt;/NumberInputStepper&gt;
                  &lt;/NumberInput&gt;
                  {touched.prefixo &amp;&amp; (
                    &lt;FormHelperText
                      fontSize='1.0em'
                      fontFamily='Poppins'
                      textColor='#e74c3c'
                    &gt;
                      {errors.prefixo}
                    &lt;/FormHelperText&gt;
                  )}
                &lt;/FormControl&gt;
      
                &lt;FormControl w='100%' id='username' p={4} isRequired&gt;
                  &lt;FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'&gt;
                    Nome
                  &lt;/FormLabel&gt;
                  &lt;InputGroup size='lg'&gt;
                    &lt;InputLeftAddon
                      textColor='whiteAlpha.900'
                      fontFamily='Inter'
                      bg='#6842c2'
                      fontSize='2xl'
                      size='lg'
                      height='3.5em'
                      children='Tio(a)/'
                    /&gt;
                    &lt;Input
                      textColor='whiteAlpha.900'
                      fontFamily='Poppins'
                      fontSize='2xl'
                      w='100%'
                      type='username'
                      height='3.5em'
                      value={values.username}
                      onChange={handleChange}
                      onBlur={handleBlur}
                    /&gt;
                  &lt;/InputGroup&gt;
                  {touched.username &amp;&amp; (
                    &lt;FormHelperText
                      fontSize='1.0em'
                      fontFamily='Poppins'
                      textColor='#e74c3c'
                    &gt;
                      {errors.username}
                    &lt;/FormHelperText&gt;
                  )}
                &lt;/FormControl&gt;
              &lt;/Box&gt;
              &lt;Box w='50%' alignItems='center' justifyContent='center' p={4}&gt;
                &lt;Button
                  fontFamily='Poppins'
                  fontSize='1.2em'
                  size='lg'
                  height='2.5em'
                  colorScheme='blue'
                  width='100%'
                  onClick={handleSubmit}
                  isLoading={isSubmitting}
                &gt;
                  Cadastrar
                &lt;/Button&gt;
              &lt;/Box&gt;
      
              &lt;Link href='/login' color='white' fontFamily='Poppins'&gt;
                Já tem uma conta? Faça o Login
              &lt;/Link&gt;
            &lt;/Container&gt;
          &lt;/Box&gt;
        );
      }
  </code></pre>