How to escructurate big forms with react – SEO

I’m creating a big form to make a new product with many components like “Description, Images, Prices, etc”.

My idea is to generate a container for “NewProduct” and inside of its call many small form Components.

My problems it’s that I don’t know what’s the good practice to make this.

I mean, Each component has his own validation but these validations would be triggered by the Father component when it will submit.

And I want to obtain the State of Every form and set up inside of the father state.

This is my Actual code for NewProductContainer:

class NewProductSection extends React.Component{
constructor(props) {
    super(props);
    this.state = {
      description: {
          name:"",
          description:"",
      },
      images: [],
      prices: {
          price:"",
          price_compare:"",
          flat_price:""
      },
      inventory: {
          sku:"",
          bar_code: "",
          quantity: "",
      },
      shipping: {
        weight:"",
        logitic_service: "",
      },
      variants: [],
      seo: {
          page_title: "",
          meta_description: "",
          url:"",
      }


    };
  }
render(){
    return (
        <div className="row">
            <div className="col-8">
                <Description/>
                <LoadImages/>
                <ProductPrices/>
                <Inventory/>
                <Shipping/>
                <Variants/>
                <Seo/>
            </div>
            <div className="col-4">
                <Organization/>
            </div>
        </div>
    );
}
}

DescriptionComponent

class Description extends React.Component{
    render(){
        return (
            <div className="card">
                <div className="card-body">
                    <div className="form-group">
                        <label htmlFor="inputAddress">Nombre</label>
                        <input type="textarea" className="form-control" id="inputAddress" placeholder="1234 Main St" />
                    </div>
                    <div className="form-group">
                        <label htmlFor="inputAddress">Description</label>
                        <textarea className="form-control" rows={5} id="comment" defaultValue={""} />
                    </div>
                </div>
            </div>
        )
    }
}

export default Description;

Any suggestion?