Considering that I am using cellRender to display custom text and images in the grid according to the numeric value I receive from the database, 1 to 10;
It is working well, but when filtering the column I would like to display the custom texts and not the numeric values;
What should I do?

Filter

The code for my column is as follows:

{
    headerName: "Situação",
    field: "statusNotificacoes",
    checkboxSelection: true,
    headerCheckboxSelection: true,
    headerCheckboxSelectionFilteredOnly: true,
    sortable: true,
    filter: true,
    resizable: false,
    width: 100,
    minWidth: 160,
    cellRenderer: (params) => {
      const value = params.value;

      let imgSrc = "";
      let text = value;
      if (value === 1) {
        imgSrc = "img/ar.png";
        text = "A.R";
      } else if (value === 2) {
        imgSrc = "img/clock.png";
        text = "Aguardando";
      } else if (value === 3) {
        imgSrc = "img/circleN.png";
        text = "Autuada";
      } else if (value === 4) {
        imgSrc = "img/cancelada.png";
        text = "Cancelada";
      } else if (value === 5) {
        imgSrc = "img/accept.png";
        text = "Concluída";
      } else if (value === 6) {
        imgSrc = "img/editalblue.png";
        text = "Edital";
      } else if (value === 7) {
        imgSrc = "img/accept.png";
        text = "Normal";
      } else if (value === 8) {
        imgSrc = "img/circle.png";
        text = "Notificada";
      } else if (value === 9) {
        imgSrc = "img/diagram.png";
        text = "Reautuada";
      } else if (value === 10) {
        imgSrc = "img/vencidared.png";
        text = "Vencida";
      } else {
        imgSrc = "img/loading.png";
        text = "Loading...";
      }

      return `
        <div style="display: flex; align-items: center;">
          <img src="${imgSrc}" alt="${text}" style="width: 20px; height: 20px; margin-right: 5px;" />
          <span>${text}</span>
        </div>
      `;
    },        
  },