I am trying to enable row edit for a particular array of People Picker and Dropdown controls. Below is what I have so far,

    <table cellSpacing="1">
                <div className={styles.tableStyle} >  
                <tr>
                  <td className={styles.CellStyle}>Division</td>
                  <td className={styles.CellStyle}>Assignee</td>
                  <td className={styles.CellStyle}>Added by</td>
                </tr>
              </div> 
                {this.state.ListItems.reverse().map(function(item,key){
                  return(<div className={styles.rowStyle} key={item.Id}> 
                    <tr>
                      <td><div><Stack tokens={stackTokens}><Dropdown required={true} 
                      onChange={this._getDropdownItem1} 
                      placeholder="Select a Division" 
                      options={this.state.DivisionListItems} 
                      selectedKey={item.Division} 
                      styles={dropdownStyles}  
                      disabled={this.state.isEdit}/>
                      </Stack></div></td>
                      <td>
                        <div><PeoplePicker context={this.props.context} 
                      personSelectionLimit={3} 
                      groupName={""}  
                      showtooltip={true} 
                      tooltipMessage="Select multiple users for assigning the item" 
                      isRequired={true} 
                      disabled={this.state.isEdit} 
                      ensureUser={true} 
                      selectedItems={item.Assignee.map(assigne=>assigne.Title)} 
                      showHiddenInUI={false} 
                      principalTypes={[PrincipalType.User]} 
                      defaultSelectedUsers={item.Assignee} 
                      resolveDelay={1000} /></div></td>
                      <td></td>
                      <td><div><label className='ms-Label'>{item.Author.Title}</label></div></td>
                    </tr>
                     <div className={styles.editdiv}><DefaultButton className={styles.button} onClick={()=>{this.handleEdit(item,key)}} iconProps={{iconName:'Edit'}}></DefaultButton><DefaultButton className={styles.button} onClick={()=> { if (window.confirm('Are you sure you wish to delete this item?')){this.handleDelete(item.Id)}  this.onCancel(item) }} iconProps={{iconName:'Delete'}}></DefaultButton></div>
                  </div>
                     );
                }.bind(this))}
              </table>

> Handle edit function below

    @autobind
    public handleEdit(Division,Users){
      let selectedUsers = [];
       for (let item in Users) {
         selectedUsers.push(Users[item].Title);
       }
      this.setState({editusers:selectedUsers,Dropdownvalue:Division,isEdit:false });
      console.log("event is" + event);
    }

How do I give unique id to dropdown control and people picker to be able to edit and perform operations only for that row in the array map? I have already given a kay for each div and I have unique id which is item.id.