React Json Form Schema Validation

Question

I need field validation, e.g., (required* field) using the packages

• "@rjsf/antd": v5
• "@rjsf/core": v5

When I use the standard <Form /> component it is working. If I use the <RJSFForm /> it doesn't.

• I need the <RJSFForm /> so I can apply the antd theme.

• I need the submit button to be placed outside the form component, as implemented in the following code. This is why I am hiding the internal button.

About Validation this is what I read in the documentation

Sandbox of the following code: https://codesandbox.io/s/suspicious-http-v34hgn?file=/src/App.js:0-1400

import React, {createRef} from "react";
import "./App.less";
import Form, {withTheme} from "@rjsf/core";
import validator from "@rjsf/validator-ajv8";

import {Theme as AntDTheme} from '@rjsf/antd';
import {Popconfirm} from "antd";

const RJSFForm = withTheme(AntDTheme);

const uiSchema = {
    "ui:disabled": false,
    "ui:order": [
        "Name1",
        "Number 1",
    ],
    Name1: {
        "ui:disabled": false
    },
    "Number 1": {
        "ui:disabled": false
    },
};

const schema = {
    type: "object",
    $schema: "http://json-schema.org/draft-07/schema#",
    required: ["Name1"],
    "ui:order": [
        "Name1",
        "Number 1",
    ],
    properties: {
        Name1: {
            type: "string"
        },
        "Number 1": {
            type: "number",
            default: 0
        },
    },
    $id: "http://json-schema.org/draft-07/schema#"
};


function App() {
    const formRef = createRef();
    const submitRef = createRef();
    const onError = (errors) => console.log(errors);

    return (
        <div className="App">
            <RJSFForm
                schema={schema}
                uiSchema={uiSchema}
                validator={validator}
                // onError={onError}
                ref={formRef}
                formData={{
                    "Number 1": 0,
                }}
            >
                <button hidden={true} ref={submitRef}/>
            </RJSFForm>
            <button
                onClick={() => {
                    submitRef.current.click();
                    // formRef.current.submit();
                }}
            >
                submit
            </button>

        </div>
    );
}


export default App;

UPDATE:

I examined the input field via the dev tools. It seems that this theme (antd) does not apply the required property to the fields.

I opened a ticket in GitHub