formik: TypeError: Cannot read property 'validate' of undefined

❓Question

I am getting the error TypeError: Cannot read property 'validate' of undefined when running a chai-enzyme test, followed by the warning: console.warn node_modules/tiny-warning/dist/tiny-warning.cjs.js:13 Warning: Formik context is undefined, please verify you are calling useFormikContext() as child of a <Formik> component.

Any help would be appreciated, I’ve also posted in the Discord channel but some other people had the same question but no response, so I thought I’d open an issue since it was easier to post more code here. Thanks!

This is the render of my formik component:

   const { formInfo, children, validationSchema, bindSubmitForm } = this.props;
   const validation = Yup.object(validationSchema);
   return (
     <Formik
       initialValues={formInfo}
       /* tslint:disable-next-line:jsx-no-lambda jsx-no-multiline-js */
       onSubmit={() => {
       }} // onSubmit is a required prop for Formik to work but we use our own submit in the parent component
       validationSchema={validation}
     >
       {/* tslint:disable-next-line:jsx-no-multiline-js */}
       {(formik) => {
         bindSubmitForm(formik.submitForm);
         return (
           <div className="common-form-page-container">
             <div className="common-form-container">
               <Form translate={'yes'}>
                 {children(formik)}
               </Form>
             </div>
           </div>
         );
       }}
     </Formik>
   );
 }
}

CarouselInput is the component I am testing:
formTemplate = (formik) => {
   const { banner, bannerIndex } = this.state;
   return(
     <React.Fragment>
       <FormSection title="Write It">
         <FormRow>
           <FormColumn>
             <FormInput
               required={false}
               field="carousel"
               formType={HTML_TAGS.CUSTOM}
               /* tslint:disable-next-line:jsx-no-lambda jsx-no-multiline-js */
               render={() => {
                 const handleContentIndex = async (index) => {
                   this.setState({
                     bannerIndex: index,
                   });
                 };
                 return (
                   <CarouselInput
                     formInfo={banner.content}
                     onChange={this.handleOnChange}
                     newItem={this.addNewTab}
                     handleIndex={handleContentIndex}
                     carouselSlideIndex={bannerIndex}
                     children={(onChange, content) => <BannerCarouselForm onChange={onChange} content={content} />}
                   />
                 );
               }}
             />
           </FormColumn>
         </FormRow>
       </FormSection> 
 </React.Fragment>
)}

And this is the test:
 it('should add new slide on click', () => {
   const tree = shallow(<CommonFormWrapper />);

   const component = mount(
     <CarouselInput
       formInfo={content}
       onChange={this.handleOnChange}
       newItem={this.addNewTab}
       handleIndex={handleIndex}
       carouselSlideIndex={0}
       /* tslint:disable-next-line:jsx-no-lambda */
       children={(onChange, content) => <BannerCarouselForm onChange={onChange} content={content} />}
     />
   );
   tree.find(component).dive().find('.add-slide-button').simulate('click', { persist: () => {}, });
   expect(newItem).to.have.been.calledOnce;
 });