How To Add Nested Object on form Submitting?

////// This is my form.js file

    this.initialState = {id: "", title: "",items: [{id: "",name: "",price: ""}]};
    this.state = this.initialState;}
    handleChange = event => {const { name, value } = event.target;
    this.setState({[name]: value});
  };
  submitForm = () => {this.props.handleSubmit(this.state);};
  render() {
    const { id, title, items } = this.state;
    return (
        <form>
          <input
            type="number"
            name="id"
            placeholder="Category Id"
            value={id}
            onChange={this.handleChange}/> <br />
          <label>Category title</label>
          <br />
          <input
            type="text"
            name="title"
            placeholder="Category title"
            value={title}
            onChange={this.handleChange}/><br />

////// Category Value is fine update but Items value did not update

<input
            type="number"
            name={items.id}
            placeholder="itemId"
            value={items.id}
            onChange={this.handleChange}/><br />
          <label>Item Name</label><br />
          <input
            type="text"
            name={items.name}
            placeholder="itemName"
            value={items.name}
            onChange={this.handleChange}/><br />
          <label>Item Price</label><br />
          <input
            type="number"
            name={items.price}
            placeholder="itemPrice"
            value={items.price}
            onChange={this.handleChange}/><br />
          <input type="button" value="submit" onClick={this.submitForm} />
        </form>
    ); } }

I missed something in my code but Don't know where and what's wrong. Someone Please Help me..!!!