Kendo React basic Form submit

I've created a basic Kendo React Form, but nothing happens when I hit 'Submit'. Why doesn't the alert get called?

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Field, Form, FormElement } from "@progress/kendo-react-form";

const handleSubmit1 = (dataItem) => {
  alert(1);
};

const AppComponent = () => {
  return (
    <Form
      onSubmit={handleSubmit1}
   
      render={(formRenderProps) => (
        <FormElement>
          <button type={"submit"} disabled={false}>
            Submit
          </button>
        </FormElement>
      )}
    />
  );
};

ReactDOM.render(<AppComponent />, document.querySelector("my-app"));

Working example here:

https://codesandbox.io/s/black-currying-459p5h?file=/app/main.jsx

You need to add some input fields to your form for the user to enter data. Without any fields, the form won't have anything to submit, and your handleSubmit function won't be called. Just add some Field components to your Form.

Example:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Field, Form, FormElement } from "@progress/kendo-react-form";

const handleSubmit1 = (dataItem) => {
  alert(JSON.stringify(dataItem));
};

const AppComponent = () => {
  return (
    <Form
      onSubmit={handleSubmit1}
      render={(formRenderProps) => (
        <FormElement>
           // component attribute on <Field/> is mandatory! 
          <Field name="firstName" label="First name" component="input" />
          <button type="submit" disabled={!formRenderProps.allowSubmit}>
            Submit
          </button>
        </FormElement>
      )}
    />
  );
};

ReactDOM.render(<AppComponent />, document.querySelector("#my-app"));

Hope it helps :)