Ag Grid Cell Renderer Иконки не реагируют на нажатия

Question

У меня есть простое средство визуализации ячеек, которое возвращает значок:

import React from 'react'
function ActionRenderer(params) {
  const editRedirect = (e) =>{
    console.log("Clicked");
  }
  return (
    <div>
      <span class="actionIcons editIcon">
        <i onClick={editRedirect} class="fas fa-edit" href="/details"></i>
      </span>
    </div>
  )
}
export default ActionRenderer

Когда я создаю свой компонент AgGrid, я также определяю событие onRowClicked.

 <AgGridReact
        columnDefs={columnDefs}
        defaultColDef={{ width: 160 }}
        rowData={rowData}
        frameworkComponents={frameworkComponents}
        onRowClicked={rowClicked}
      ></AgGridReact>

Как результат, мои значки не кликабельны, но строка под ними есть. Как сделать так, чтобы значки были кликабельными, но если щелкнуть строку вне значков, запустится функция rowClicked? Другими словами, щелчок строки переопределяет мой щелчок значка, и я должен был изменить это.

const frameworkComponents = {
    //  buttonRenderer: ButtonRenderer,
    progressBarRenderer: ProgressBarRenderer,
    actionRenderer: ActionRenderer,
  }

  const columnDefs = [
    {
      headerName: 'Full Name',
      field: 'name',
      unSortIcon: true,
      sortable: true,
      filter: true,
      lockPosition: true,
    },
    {
      headerName: 'Actions',
      field: 'actions',
      width: 140,
      lockPosition: true,
      cellRenderer: 'actionRenderer',
    },
  ]