I have a React Bootstrap form which represents a customer sign up form for my website.

This Form contains two parts:

1. The form group for field 1
2. The SetOfNestedFields component, which also contains a list of form fields defined in the same way as field 1.

I have an onSubmit function which calls the native checkValidity() function on my Form.

This checkValidity() function only seems to evaluate Form with label Field1, it doesn't validate any of the Form fields in the SetOfNestedFields component.

Is there another function like checkValidity() which will check and validate not only the inputs in field1 (part 1 of form) but also all of the nested fields in the SetOfNestedFields component (part 2 of form)?

<Form validated={validated} onSubmit={handleSubmit}>
                   // Start Part 1 of form
                    <Form.Group controlId="field1">
                        <Form.Label>Field 1</Form.Label>
                        <Form.Control
                            required
                            type="text"
                            placeholder="Enter Field 1"
                            onChange={(e) => {
                                setField1(e.target.value);
                            }}
                        />
                    </Form.Group>
                   // End part 1 of form

                   // Start Part 2 of form
                    <FormGroup>
                        <SetOfNestedFields
                            onSubmit={handleSubmit}
                            isValidated={validated}
                        />
                    </FormGroup>
                   //End Part 2 of form

                    <Button type="submit">
                        Sign me up!
                    </Button>
                </Form>

I have an onSubmit function which checks form validity.

const handleSubmit = (event) => {
        if (form.checkValidity() === false) {
            event.stopPropagation();
            setValidated(true); 
        }