Any Way to Programatically Invoke Form Validation

After two days of trying to get the Form component to work for my needs, I've hit a pretty major roadblock for our product.

Use Case: Admin creates a template with dynamic fields. End user consumes the template, but has multiple instances of it in a single page. End user shouldn't need to go thru each instance of the template. They should be able to click "Submit" and all template instances are validated. First invalid instance is displayed.

In Kendo UI, this was easy.  You iterate all the <form> elements and run .validate() on it.

Now, I realize KendoReact is NOT Kendo UI, and that React is a totally different thought process than good ol' jQuery. However, I need something similar.

The problem I keep running into is that everything that I need is in FormRenderProps. Your Form control expects you to hit a Submit button inside of the Form's render function. Originally, I didn't want this, but I was able to wrap my entire UX in the form to make it work (not too pleased that I had to, though). So when the Submit button is clicked, it uses formRenderProps.onSubmit, which does some blackbox magic and raises the Form's onSubmitClick/onSubmit events. Things were going fine until I realized I can't do this purely linearly.

I've forked your Multi-Step Form example and quickly tweaked it to be similar to my team's needs. We're using a Stepper to mimic the tabs that we use (though the actual UX control we use is more similar to your TabStrip): https://stackblitz.com/edit/react-vqk7ya?file=app/data.jsx

The idea is that the end user should be able to either click "Submit" and have the validation code run for each Stepper step/TabStripTab or they can jump around as they wish by clicking the actual Stepper step/TabStripTab. For our needs, validation only needs to occur on Submit (but each step must be validated on Submit click).