Wrap React-Bootstrap Scrollable Modal in Formik Form

Question

I'm wrapping a React-Bootstrap scrollable Modal in a Formik Form in order to have the buttons in the Modal.Footer submit the form. However when I wrap the Modal.Body and Modal.Footer in a Form element it stops the content from being scrollable. Any idea how to wrap the modal in a form and preserve the style? Here's the code:

<Modal show={this.props.displayModal} onHide={this.reset} dialogAs="div">
    <Formik initialValues={{}} validationSchema={validationSchema} onSubmit={this.handleSubmit}>
        <Form>
            <Modal.Header closeButton>
                <Modal.Title>Add Item/Modal.Title>
            </Modal.Header>
            <Modal.Body>CONTAINS FORM INPUTS</Modal.Body>
            <Modal.Footer>
                <Button type="submit" variant="primary">
                    Save
                </Button>
            </Modal.Footer>
        </Form>
    </Formik>
</Modal>

I did attempt place the Modal in the Form, but this leads to the Modal being rendered outside the form element in the HTML. eg:

<Formik initialValues={this.initialValues} validationSchema={this.validationSchema} onSubmit={this.handleSubmit}>
    <Form>
        <Modal show={this.props.displayModal} onHide={this.reset} dialogAs="div">
           ...
        </Modal>
    </Form>
</Formik>

Answer 1

To fix this issue I had to add a Modal.Dialog inside the Form and then change the dialogAs prop of the Modal to a div. This leads to the Modal.Dialog handling the scrollable styling, which I wanted to preserve.

<Modal show={this.props.displayModal} onHide={this.reset} dialogAs="div">
    <Formik initialValues={{}} validationSchema={validationSchema} onSubmit={this.handleSubmit}>
        <Form>
            <Modal.Dialog scrollable size="lg">
                <Modal.Header closeButton>
                    <Modal.Title>Add Item/Modal.Title>
                </Modal.Header>
                <Modal.Body>CONTAINS FORM INPUTS</Modal.Body>
                <Modal.Footer>
                    <Button type="submit" variant="primary">
                        Save
                    </Button>
                </Modal.Footer>
            </Modal.Dialog>
        </Form>
    </Formik>
</Modal>