Как сделать клик на "Steps" в родительском компоненте с помощью Formik?

Всем привет. Помогите с решение задачи, есть у меня компонент , который создает купон в нем есть сверху 4 кнопки для каждого шага, и между шагами можно переключаться, и также есь кнопки внизу 'next' and 'back', и в нем лежит 4 шага заполнение разной информации, на 2-м шагу есть форма, которая сделана через Formik, и изменения стейта происходит на клик кнопки next, и этот клик находиться в компоненте Step2, а мене этот клик нужно сделать чтобы я смог сделать клик на каждом шагу и делал сабмит форми на 2 шагу

        return (
            <ContainerPage
                classContainer="create-coupon-page"
                title="creation_coupon"
                icon={true}
                breadcrumbs={false}
                buttonBlockRight={
                    <button onClick={() => toggleUploadExcelCoupons(true)}
                            className="btn img-btn-right btn-outline-primary">
                        <img src={`${process.env.CONTEXT}public/images/upload.svg`}/>
                        <TranslationContainer translationKey={'upload_coupons_excel'} />
                    </button>
                }
            >
                <>
                    <LoaderComponent loading={isLoading} />
                    <StepsBlock
                        step={step}
                        activeStep={activeStep}
                        activateStep={this.activateStep}
                        goNext={this.goNext}
                        disabled={selectedItems.length === 0}
                        stepsButtons={stepsButtons}
                    >
                        {
                            activeStep === 1 &&
                            <Step1
                                loadProducts={loadItems}
                                loadProductsWithFilter={loadItemsWithFilter}
                                selectedProducts={selectedItems}
                                couponImages={couponImages}
                                selectedProductsFilter={{
                                    ...filters,
                                    page: [pageSizeItems, pageItems === 0 ? 1 : pageItems]
                                }}
                                selectProducts={selectItems}
                                selectAllProducts={selectAllItems}
                                deleteProducts={deleteProducts}
                                pageSizeProducts={pageSizeItems}
                                categories={categories}
                                activeStep={activeStep}
                                activateStep={this.activateStep}
                                goNext={this.goNext}
                                stepsButtons={stepsButtons}
                            />
                            || activeStep === 2 &&
                            <Step2
                                selectedProducts={selectedItems}
                                activeStep={activeStep}
                                activateStep={this.activateStep}
                                goNext={this.goNext}
                                stepsButtons={stepsButtons}
                                addCouponInfo={this.addCouponInfo}
                                couponInfo={couponInfo}
                                addCondition={this.addCondition}
                                innerRef={this.childRef}
                            />
                            || activeStep === 3 &&
                            <Step3
                                selectedProducts={selectedItems}
                                activeStep={activeStep}
                                activateStep={this.activateStep}
                                goNext={this.goNext}
                                stepsButtons={stepsButtons}
                                deleteCondition={this.deleteCondition}
                                addCondition={this.addCondition}
                                conditions={conditions}
                            />
                            || activeStep === 4 &&
                            <Step4
                                selectedProducts={selectedItems}
                                activeStep={activeStep}
                                activateStep={this.activateStep}
                                createCoupon={this.createCoupon}
                                addExerciseOptions={this.addExerciseOptions}
                                exerciseOptions={exerciseOptions}
                                stepsButtons={stepsButtons}
                            />
                        }
                        {
                            this.props.createdCoupon
                            ?
                            <CreatedCouponModal show={this.props.showCreatedCouponModal} />
                            :
                            null
                        }
                    </StepsBlock>
                </>
                <UploadExcelModalCoupons/>
            </ContainerPage>
        );
    }



    goNext = (step) => {
        this.setState({...this.state, activeStep: step, step: step})
        this.childRef.current.handleSubmit()
        this.childRef.current.setFieldTouched('amountCoupons', false, false)
        console.log('childref', this.childRef.current )
    }

    


и сам компонент степа 



class Step2 extends React.PureComponent {
    constructor() {
        super()
        this.form = createRef()
    }

    render() {
        const { innerRef, selectedProducts, activateStep, activeStep, stepsButtons, addCouponInfo, goNext, couponInfo, language, match } = this.props;

      

        return (
            <>
                <Row className="step-g-block">
                    <div className="col-lg-8 col-sm-12">
                        <StepBlockWrapper
                            title="coupon_details"
                            className="step-p"
                        >
                            <Formik
                                component={CouponInfoStepForm}
                                initialValues={{
                                    ...couponInfo,
                                    ...(couponInfo.amountCoupons === null && {amountCoupons: ''}),
                                    ...(couponInfo.endDate && {endDate: moment(couponInfo.endDate, "DD-MM-YYYY")}),
                                    ...(couponInfo.startDate && {startDate: moment(couponInfo.startDate, "DD-MM-YYYY")})
                                }}
                                validationSchema={schema}
                                validateOnBlur={true}
                                validateOnChange={false}
                                onSubmit={(values) => {
                                    console.log('formik submitted')
                                    addCouponInfo(values);
                                    goNext();
                                }}
                                ref={innerRef}
                            />
                        </StepBlockWrapper>
                    </div>
                    <TableOfSelectedItems
                        selectedProducts={selectedProducts}
                        activateStep={activateStep}
                    />
                </Row>
                <NavigationButtons
                    activateStep={activateStep}
                    activeStep={activeStep}
                    goNext={goNext}
                    stepsButtonsLength={stepsButtons.length}
                    disabled={false}
                />
            </>
        );
    }

    goNext = () => {
        console.log(this.form)

        this.form.current.setFieldTouched('amountCoupons', false, false)
        this.form.current.handleSubmit()
    }
}


const mapStateToProps = state => ({
    language: state.mainReducer.locale
});

export default withLanguage(withRouter(connect(mapStateToProps)(Step2)));