Estoy tratando de usar Formik con el gancho useFormik pero recibo este error en la consola mientras uso formik. Cuando elimino la etiqueta, el error desaparece. Pero no sé cómo solucionar este error:

El contexto de Formik no está definido, verifique que está representando , , , o su componente de uso de contexto personalizado como elemento secundario de un componente. Nombre del componente: ErrorMessageImpl

Este es mi código:

 import { ErrorMessage, useFormik } from 'formik'; import { observer } from 'mobx-react-lite'; import { useStore } from '../../app/stores/store'; function LoginForm() { const { userStore } = useStore(); const formik = useFormik({ initialValues: { email: '', password: '', error: null, }, onSubmit: (values, actions) => { setTimeout(() => { userStore.login(values).catch((error) => actions.setErrors({ error: 'Invalid email' })); actions.setSubmitting(false); }, 500); }, }); return ( <form onSubmit={formik.handleSubmit}> <div className='input-container'> <input id='email' name='email' type='email' placeholder='Email' onChange={formik.handleChange} // values in formik contains initialValues value={formik.values.email} /> </div> <div className='input-container'> <input id='password' name='password' type='password' placeholder='Password' onChange={formik.handleChange} value={formik.values.password} /> </div> <div className='input-container'> <ErrorMessage name='error' render={() => <p>{formik.errors}</p>} /> </div> <button type='submit' className='btn btn-secondary'> Login {formik.isSubmitting && ( <span className='spinner-border spinner-border-sm ms-2' role='status' aria-hidden='true' ></span> )} </button> </form> ); } export default observer(LoginForm);