Как в React постепенно вводить значения в массив?

У меня есть приложение back я сделал на Visual studio(api) а фронт на VS code используя react. У меня есть кнопка типа radio и после нажатие я должен получить id каждой строки на которую нажал пользователь.

После чего я должен передать этот массив на исполнение в API. Как эти данные постепенно вводить в массив чтобы потом его передать на c#?

Конструктор:

constructor(props){
    super(props);
    
    this.state={
        departments:[],
        modalTitle:"",
        DepartmentName:"",
        DepartmentId:0,
        DepartmentIdFilter:"",
        DepartmentNameFilter:"",
        departmentsWithoutFilter:[]
    }
}

Вот как выводиться сама таблица:

     <tbody>
    {departments.map(dep=>
        <tr key={dep.DepartmentId}>
            <td>{dep.DepartmentId}</td>
            <td>{dep.DepartmentName}</td>
            <td>
            <button type="button"
            className="btn btn-light mr-1"
            data-bs-toggle="modal"
            data-bs-target="#exampleModal"
            onClick={()=>this.editClick(dep)}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil-square" viewBox="0 0 16 16">
                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                <path fillRule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
                </svg>
            </button>

            <button type="button"
            className="btn btn-light mr-1"
            onClick={()=>this.deleteClick(dep.DepartmentId)}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash-fill" viewBox="0 0 16 16">
                <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                </svg>
            </button>
          
           
            </td>
           <td>
                <input type="radio" onClick={()=>this.} ></input>
            </td> 
        </tr>
        
        )}
        
</tbody>

</table>

Пример как я передаю 1 значение id:

 deleteClick(id){
    if(window.confirm('Are you sure?')){
    fetch(variables.API_URL+'department/'+id,{
        method:'DELETE',
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/json'
        }
    })
    .then(res=>res.json())
    .then((result)=>{
        alert(result);
        this.refreshList();
    },(error)=>{
        alert('Failed');
    })
    }
}

А так реализована API:

 [HttpDelete("{id}")]
    public JsonResult Delete(int id)
    {
        string query = @"
                       delete from dbo.Department
                        where DepartmentId=@DepartmentId
                        ";

        DataTable table = new DataTable();
        string sqlDataSource = _configuration.GetConnectionString("EmployeeAppCon");
        SqlDataReader myReader;
        using (SqlConnection myCon = new SqlConnection(sqlDataSource))
        {
            myCon.Open();
            using (SqlCommand myCommand = new SqlCommand(query, myCon))
            {
                myCommand.Parameters.AddWithValue("@DepartmentId", id);

                myReader = myCommand.ExecuteReader();
                table.Load(myReader);
                myReader.Close();
                myCon.Close();
            }
        }

        return new JsonResult("Deleted Successfully");
    }