How do i add multiple custom columns in material-react-table? This code only adds one column named Action, i want to add more

Question

const options = { search: true, download: true, print: true, viewColumns: true, filter: true, filterType: "dropdown", elevation: 0, responsive: "standard", tableBodyHeight: "450px", tableBodyMaxHeight: "", selectableRows: 'none',

enableRowActions: 'true',
positionActionsColumn: 'last',

displayColumnDefOptions: {
  'mrt-row-actions': {
    header: 'Change Account Settings', //change header text
    size: 200, //make actions column wider
  },
},

renderRowActions: ({ row }) => (
  <div className='d-flex align-items-center'>
    {row.original.role_id == 1 ? <div>Super Admin</div> : row.original.role_id == 2 ? <div>Admin</div> : <div>Agent</div>}
    <EnableDisableComp data={tranformToArray(row.original)} columns={columns} />
    <Edit size={16} className="text-theme mx-3" onClick={() => dispatch({ type: "openModal", payload: <EditForm data={tranformToArray(row.original)} columns={columns} /> })} />
  </div>
),



renderTopToolbarCustomActions: () => {
  return (<Customtoolbar content={<AddForm />} />)
}

};

renderRowActions: ({ row }) => ( {row.original.role_id == 1 ? Super Admin : row.original.role_id == 2 ? Admin : Agent} <Edit size={16} className="text-theme mx-3" onClick={() => dispatch({ type: "openModal", payload: })} /> ),