Using useFormik() with <Field /> getting error: formik.getFieldProps is not a function

Hey there I am new to formik library, and I am trying to use react-draft-wysiwyg component with Formik. Here is my code.

RichTextEditor.js

import React, { useState } from "react";
import { EditorState, convertToRaw, ContentState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import { useField } from "formik";

const RichTextEditor = (props) => {
  const [field, meta, helpers] = useField(props);

  const { value } = meta;
  const { setValue } = helpers;

  const prepareDraft = (value) => {
    const draft = htmlToDraft(value);
    const contentState = ContentState.createFromBlockArray(draft.contentBlocks);
    const editorState = EditorState.createWithContent(contentState);
    return editorState;
  };

  const [editorState, setEditorState] = useState(
    value ? prepareDraft(value) : EditorState.createEmpty()
  );

  const onEditorStateChange = (editorState) => {
    const forFormik = draftToHtml(
      convertToRaw(editorState.getCurrentContent())
    );
    setValue(forFormik);
    setEditorState(editorState);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
        {...props}
        {...field}
      />
    </div>
  );
};

export default RichTextEditor;

and AddPost.js

import React from "react";
import { Row, Col, Card, Form, Input } from "antd";
import { useFormik, Field } from "formik";
import RichTextEditor from "../RichTextEditor/RichTextEditor";

const initialValues = {
  title: "",
  body: "",
};
export default function AddContent() {
  const formik = useFormik({
    initialValues,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <Row>
      <Col span={19}>
        <Card>
          <>
            <h1>
              {formik.values.title ? formik.values.title : "Content Title"}
            </h1>

            <Form onSubmit={formik.handleSubmit}>
              <Input
                id="title"
                name="title"
                placeholder="Content Title"
                onChange={formik.handleChange}
                value={formik.values.email}
              />

              <Field
                name="body"
                component={RichTextEditor}
                value={formik.values.body}
                onChange={formik.handleChange}
                // {...formik.getFieldProps("body")}
              />
            </Form>
          </>
        </Card>
      </Col>
      <Col span={5}></Col>
    </Row>
  );
}

But I am getting following error

TypeError: formik.getFieldProps is not a function
Field
src/Field.tsx:181

  178 |     unregisterField(name);
  179 |   };
  180 | }, [registerField, unregisterField, name, validate]);
> 181 | const field = formik.getFieldProps({ name, ...props });
      | ^  182 | const meta = formik.getFieldMeta(name);
  183 | const legacyBag = { field, form: formik };
  184 | 

I had the same problem and fixed it with the following fix.
In short, wrap inside the render with a FormikProvider.

AddPost.js

// add FormikProvider
import { useFormik, Field, FormikProvider } from "formik";

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

// wrap with FormikProvider
return (
  <FormikProvider value={formik}>
    <Row>...your-code...</Row>
  </FormikProvider>
)