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.