AG GRID 콤보 이름 보이게 하기(클래스형)

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ColDef } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const processTypeMap: Record<string, string> = {
PROCESS: 'Process',
VERIFY: 'Answer',
NOTFIY: 'Notify', // 'NOTIFY' 오타 여부 확인 필요
};

interface RowData {
id: number;
processType: string;
}

interface State {
columnDefs: ColDef[];
rowData: RowData[];
}

export class ProcessGrid extends Component<{}, State> {
constructor(props: {}) {

super(props);
this.state = {
  columnDefs: [
    { headerName: 'ID', field: 'id' },
    {
      headerName: '처리 유형',
      field: 'processType',
      valueFormatter: (params) => processTypeMap[params.value] || params.value,
    },
  ],
  rowData: [
    { id: 1, processType: 'PROCESS' },
    { id: 2, processType: 'VERIFY' },
    { id: 3, processType: 'NOTFIY' },
  ],
};

}

render() {

return (
  <div className="ag-theme-alpine" style={{ height: 300, width: '100%' }}>
    <AgGridReact
      columnDefs={this.state.columnDefs}
      rowData={this.state.rowData}
    />
  </div>
);

}
}