Kendo React Form Within Kendo React Dialog

HI,

I have a Dialog with some Kendo controls - something like the attached screenshot.

const onSave = () => {
...
}
 

{props.visible && (<Dialog title={"Split Audience"} height={{dialogHeight}} width={800} closeIcon={false}>
    <Form onSubmit={onSave} render={formRenderProps => <FormElement>

...

        
        <Field name={"SS_"+index} maxLength={55} component={SegmentNameInput} defaultValue={segmentName+'_'+suffixValues[index]}
                validator={segmentNameValidator}/>
...
       </FormElement>
     }/>
    <DialogActionsBar layout={"end"}>
        <button
            className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary dialog-save" type="submit">
            Save
        </button>
    </DialogActionsBar>
               
            

The issue is that the onSave submit handler never gets invoked.  I was wondering if it is because the <Form..> is within the dialog?

Any help would be appreciated.