How to set value of forms when using react-dropzone

[87sam12]

Lets assume I have a form file-drop field. I drop a file. But as my project is complex I have defined my onDrop method in another file. Now once the file is dropped I need to set one form fields to be this file. How do I go about structuring it? I tried useFormikContext hook. But it errored out with
React Hook "useFormikContext" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
Any ideas??

[johnrom]

If you create a CodeSandbox trying to reproduce the issue, I can take a look. Generally, you'd have a variant of a field which is not connected to Formik and then a variant which just wraps that raw field in another field which calls useFormikContext to get the data from Formik's state. Then, the only time you'd call useFormikContext is when you're under a Formik instance (using <Formik component).

[87sam12]

Im just showing some portion. Pls just identify the structural issue here:

//Main file
import { FileUploadSection } from "./FileUploadSection.js";
const FileUploadContainer = ({ files = [] }) => {
const formikProps = {
    initialValues: {
      toUploadFile: null,
    },
    onSubmit: (values, { setSubmitting }) => {
      console.log("submitting the form");
      setSubmitting(true);
      setSubmitting(false);
    },
  };
return (
    <Formik {...formikProps}>
      {(props) => (
        <form className={cx("form", "filedrop")} onSubmit={props.handleSubmit}>
<FileUploadSection /></form>
      )}
    </Formik>
);
};

export { FileUploadContainer };


//Imported FileUploadSection function component file
import { useDropzone } from "react-dropzone";
import { useFormikContext } from "formik";
const FileUploadSection = () => {
  const formikProps = useFormikContext();
  const onFileDrop = (e) => {
    formikProps.setFieldValue("number", 5);
  };
const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop: onFileDrop,
  });
return (
<FileUpload
      {...getRootProps()}
      isDragging={isDragActive}
    >
      {isDragActive ? (
        <span>Drop files here</span>
      ) : (
        <span>Choose a file or drag and drop here</span>
      )}
      <Input
        {...getInputProps()}
      />
    </FileUpload>
);
};

export { FileUploadSection };

Reproducible. In problems section you would find the formik related error.
https://codesandbox.io/s/aged-river-81vff1?file=/src/index.js

In my local: