React does not recognize the `submitHandler` prop on a DOM element error

Description

The Form component is implemented in such a way that it simply returns styled.form, which is effectively the same as:

return (<form>  </form>)

In turn this means that when the submitHandler prop is passed to the component at runtime is equivalent to:

return (<form submitHandler={() => {}}>  </form>)

since submitHandler is not a valid prop on HTMLFormElement, this causes the following error to be thrown:

Warning: React does not recognize the `submitHandler` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `submithandler` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
form
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23472
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23472
KioskEntryPage@webpack-internal:///./src/client/components/pages/KioskEntryPage.tsx:92:46
RenderedRoute@webpack-internal:///./node_modules/react-router/dist/index.js:580:7
Routes@webpack-internal:///./node_modules/react-router/dist/index.js:1269:7
AppRouter
main
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23472
tt@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:20266
MarkOneWrapper@webpack-internal:///./node_modules/mark-one/lib/Theme/MarkOneWrapper.js:11:20
Router@webpack-internal:///./node_modules/react-router/dist/index.js:1208:7
BrowserRouter@webpack-internal:///./node_modules/react-router-dom/dist/index.js:697:7
App

To Reproduce

1. Import the Form component
2. Render it (passing the submitHandler prop is optional, the error occurs either way).

Expected Behavior

The component should render without error in the console, and the submitHandler function should be fired on form submit.

Actual Behavior

The above error was raised and the submitHandler function is not fired on form submit.

Screenshots

Additional Information

Possible solution may be to (instead) return a rendered version of the component in a similar manner to the Button component:

const Form: FunctionComponent<FormProps> = (props): ReactElement => {
  const {
    id,
    submitHandler,
    label,
    children,
  } = props;
  const theme = useContext(ThemeContext);
  return (
    <Form
      id={id}
      label={label}
      submitHandler={submitHandler}
    >
      { children }
    </Form>
  );
};
)

Start with the Form component under src/Forms and compare its rendering to src/Buttons/Button.tsx, which the issue identifies as a similar component. Reproduce the warning by rendering Form with and without submitHandler, then verify that the console error is gone and submitHandler fires on form submission.