How to update a child component that extends a parent class when the parent class updates?

Question

I have a page that has a number of forms on it. In an effort to try and keep the forms consistent, I have a main Form class component that is extended by all the other forms.

This parent Form component has the logic in it to add field validation, along with adding secure tokens before and after the form fields:

Parent Form

class Form extends React.Component {

   constructor(props) {
      super(props);
   }


   view(child) {
      
       return (
           <>
              <form onSubmit={this.handleSubmit} className="form">
                 ... // extra form fields
                 
                 {child}     // 'actual' form fields, passed from child

                 ... // extra wrapper form fields
                 <button>Submit</button>
              </form>
           </>
       );

   }
}
export default Form;

Child Form

class LoginForm extends Form {
    constructor(props) {
         super(props);
         this.state = {
             data: {} ... form-field specific data
         }
    }

    render() {
         return this.view(
             <>
                 <MyFormField name="field1" onChange={this.handleChange} onBlur={this.handleBlur} field={this.state.data.field1} />
                 <MyFormField name="field2" onChange={this.handleChange} onBlur={this.handleBlur} field={this.state.data.field2} />
                 <MyFormField name="field3" onChange={this.handleChange} onBlur={this.handleBlur} field={this.state.data.field3} />             
             </>
         );
    }
}

export default LoginForm;

The LoginForm (child) extends the parent Form, and in its render method, calls the view method of the parent. This effectively will render the pieces passed over with the parent handling validation and such.

The problem it is facing, is that when an update is performed on one of the fields, it is not updating the child (LoginForm) - so any field validation errors are not displaying, and so forth.

Page

class MyPageComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <>
                <div className="my-page">
                    <h2>header</h2>
                    <LoginForm />         // including LoginForm
                </div>
            </>
        );
}

export default MyPageComponent;

The MyPageComponent will create the layout, and then embed the form in the page wherever it may be. The embedded form, in this case - LoginForm will contain all the handlers for the validation, submission, state and all that of the form.

Is this an anti-pattern? I have not found anything so far to suggest so, but it is frustrating - and I cannot help but wonder if there is a better way to do this. The only part that strikes me as somewhat unconventional, is that the child's render method calls the parent classes view method.

My goal in all this is just to create a consistent handler for all the forms on the site that can easily be reused.

How do I get the child/LoginForm to update when it is updated in the parent Form? Is there a better way to do this?

Edit Updates to the state.data.field elements are the updates that I am referring to. These are updated by running this.setState(newState) on the Form component. Usually, a state change would trigger a render update?