in react-sortable-hoc Input wrapped loses focus when onChange is fired

Question

i am using react-sortable-hoc in Model view, But my component below, the input field loses focus after typing a character.

Focus on any row of Column 2 with onChange prop, type a 2-digit number (e.g. '20') on it and then lose focus after the 1st digit (e.g. after '2')

Why is this so?

Main Page Component

render() {
const SortableItem = sortableElement(({value,yourIndex}) =>{

       return ( 
        <Row xs="12">
          <Col xs="1">
            <FormGroup>
              <DragHandle/>
            </FormGroup>
          </Col>                       
          <Col xs="4">
            <FormGroup>
            { 
              this.state.MenuItems && this.state.MenuItems != null ?
                <Select 
                options={this.state.MenuItems}
                value={this.state.MenuItems.filter(option => option.value === value.menugroupsitemsitemid)}
                onChange={this.handelItemSelectChange(yourIndex)} />
              : <Select value={null} options={emptyVal} />
            }
            </FormGroup>
          </Col>
          <Col xs="2">
            <FormGroup>
              <Input
                className="form-control-alternative text-right"
                id="itemstepname"
                placeholder="Price"
                type="text"
                name="itemsstepsitemsprice"
                value={value.menugroupsitemsprice === undefined ? '0' : value.menugroupsitemsprice}
                onChange={(e) => this.handelInputPrice(yourIndex,value.menugroupsitemsitemid,e)}
              />
            </FormGroup>
          </Col>
          <Col xs="3">
            <FormGroup>
            { 
              this.state.TaxCode && this.state.TaxCode != null ?
                <Select
                placeholder="Tax"
                options={this.state.TaxCode}
                value={this.state.TaxCode.filter(option => option.value === value.menugroupsitemstaxcode)}
                onChange={(newValue) => this.handelTaxSelectChange(yourIndex,value.menugroupsitemsitemid,newValue)} />
              : <Select value={null} options={emptyVal} />
            }
            </FormGroup>
          </Col>
          <Col xs="2">
            <FormGroup>
            {
              value.menugroupsitemsitemid ? 
              <span className="link-button" onClick={this.getItemSteps(value.menugroupsitemsitemid)}><i className="fa fa-edit mr-2 text-red" aria-hidden="true"></i></span> : null
            }

            { this.state.menuGroupItem.length > 1 ?
              <span className="link-button" onClick={(e) => this.DecreaseItem(yourIndex,value.menugroupsitemsitemid)}><i className="fa fa-minus-circle mr-2 text-red" aria-hidden="true"></i></span>
              : null
            }
            {
              this.state.menuGroupItem.length === yourIndex + 1 ?
                <span className="link-button" onClick={this.IncrementItem}><i className="fa fa-plus-circle text-icon" aria-hidden="true"></i></span>
              : null
            }
            </FormGroup>
          </Col>
        </Row>
      )
    });

    const SortableItmList = sortableContainer(({items}) => {
      return (
        
        <Row>
          <Col lg="12">
            <FormGroup>
                <label
                  className="form-control-label"
                  htmlFor="input-itemdescription"
                >
                  Items
                </label>
              {items.map((value, index) => (
                  <SortableItem key={`item-${index}`} index={index} value={value} yourIndex={index} />
              ))}
            </FormGroup>
          </Col>
        </Row>

      )  
    });
    
    return (
       <Row>
                          <Modal
                              className="modal-dialog-centered"
                              isOpen={this.state.itemModal}
                              toggle={() => this.toggleModal("itemModal")}
                          >
                            <div className="modal-header">
                              <h2 className="modal-title" id="modal-title-default">
                                {this.state.menutypename}
                              </h2>
                            </div>
                            {this.state.itmModelError ? (
                              <div className="model-alert">
                                <Alert color="danger" isOpen={this.state.visible}>{this.state.itmModelError}</Alert>
                              </div>
                            ) : null}
                            <div className="breadcrumb">
                              <li> <span className="menu-ol-list">{this.state.groupname}</span> </li> 
                            </div>
                            <div className="modal-body">
                              <SortableItmList axis="y" helperClass="sortable-list-tab" lockAxis="y" distance={0} items={this.state.menuGroupItem} onSortEnd={this.onSortEnd.bind(this)} useDragHandle />
                            </div>
                            <div className="modal-footer">
                              <Button className="ml-auto" onClick={() => this.toggleModal("itemModal")} color="primary" type="button">
                                Go Back
                              </Button>
                            </div>
                          </Modal>
                        </Row>
    )
}