Getting Error in console while using Formik <ErrorMessage />

Question

I'm trying to use Formik with useFormik hook but I'm getting this error in console while using formik . When I remove the tag the error goes away. But I don't know how to solve this error:

Formik context is undefined, please verify you are rendering , , , , or your custom context-using component as a child of a component. Component name: ErrorMessageImpl

This is my code:

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);