useFormikContext Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

I want to pass formik as a prop to Child Component CustomFormGroup and my Parent component is the Profile I'm trying to follow this answer. In Proflie component I'm getting Error. Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Component

import Input from "antd/lib/input/Input";
import { customFormGroupProps } from "../types";
import { useFormikContext } from "formik";

const CustomFormGroup = (props: customFormGroupProps) => {
  const context = useFormikContext<customFormGroupProps>();
  console.log(context);
  return (
    <div>
      <label className='mt-1'>{props.labelName}</label>
      <Input
        placeholder={props.placeholder} 
      />
    </div>
  );
};

export default CustomFormGroup;

type is as follows

export interface customFormGroupProps {
  labelName: string;
  placeholder: string;
}

Parent Component

import CustomFormGroup from "../utils/CustomFormGroup";
import formik from "./profileConfig";
import Form from "antd/lib/form/Form";

const Profile = () => {
  return (
          <Form onFinish={formik.handleSubmit}>
            <CustomFormGroup labelName="Name" placeholder="Jhon Doe" />
          </Form>
  );
};

export default Profile;

profileConfig file

import { useFormik } from "formik";
const formik = useFormik({
  initialValues:{
    name:""
  },
  onSubmit: values => {
    console.log(values.name);
  }
});
export default formik;

Answer 1

You can not use hooks outside a component function, it is simply how they work. But, you can make a composition of hooks.

const formik = useFormik({
  initialValues:{
    name:""
  },
  onSubmit: values => {
    console.log(values.name);
  }
});

Just do it like this

import CustomFormGroup from "../utils/CustomFormGroup";
import Form from "antd/lib/form/Form";
import { useFormik } from "formik";

const Profile = () => {
  const formik = useFormik({
     initialValues:{
     name:""
    },
    onSubmit: values => {
    console.log(values.name);
   }
  });
  return (
          <Form onFinish={formik.handleSubmit}>
            <CustomFormGroup labelName="Name" placeholder="Jhon Doe" />
          </Form>
  );
};

export default Profile

Answer 2

You cannot call useFormik() in profileConfig file because it is not inside a React component. useFormik() is a custom React hook from Formik and hooks don't work outside React components.

To fix, move it to Profile component.

const Profile = () => {
  const formik = useFormik({
    initialValues:{
      name:""
    },
    onSubmit: values => {
      console.log(values.name);
    }
  });
  return (
    <Form onFinish={formik.handleSubmit}>
      <CustomFormGroup labelName="Name" placeholder="Jhon Doe" />
    </Form>
  );
};