Custom cellComponent not updating on sorting

I have some custom cell components that renders different colors and labels depending on the current row value. It renders just fine but when I sort the table data the cells with these custom components doesn't update, it still the same label and the same colors of the first time it was rendered.

That's my table:

<EmberTable as |t|>
        <t.head
          @columns={{@columns}} 
          @widthConstraint='gte-container' 
          @resizeMode='standard' 
          @fillMode="equal-column"
          @sorts={{this.sorts}}
          @onUpdateSorts={{action (mut this.sorts)}} as |h|>
          <h.row  as |r|>
            {{#if r.columnValue.hideValue}}
            {{else}}
            <r.cell as |columnValue columnMeta|>
              {{columnValue.name}}
            </r.cell>
            {{/if}}
          </h.row>
        </t.head>

        <t.body @rows={{this.rows}} as |b|>
          <b.row as |r|>
            {{#if r.columnValue.hideValue}}
            {{else}}
              <r.cell as |cell column row|>
                  {{if column.cellComponent}}
                    {{component column.cellComponent object=row}}
                  {{else}}
                    {{cell}}
                  {{/if}}
              </r.cell>
            {{/if}}
          </b.row>
        </t.body>
</EmberTable>

And the column's definition:

columns = [
    {
      cellComponent: "utils/edit-record",
    },
    {
      name: "Vehicle",
      valuePath: "vehicle.plate",
    },
    {
      name: "Status",
      valuePath: "state.state",
      cellComponent: "utils/format-state",
      width: 150,
    },
  ];

And the component to format the state:

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class FormatStatusComponent extends Component {
  @tracked color = "gray-500";
  @tracked textColor = "jet";
  @tracked status = null;

  constructor(owner, args) {
    super(owner, args);

    this.status = this.args.object.get("status.status");

    switch (this.status) {
      case "Booked":
        this.color = "lazulli";
        this.textColor = "white";
        break;
      case "Waiting cleaning":
        this.color = "sunglow";
        this.textColor = "black";
        break;
      case "Bloqued":
        this.color = "light-red";
        this.textColor = "white";
        break;
      case "Canceld":
        this.color = "light-red";
        this.textColor = "white";
        break;
      default:
        this.color = "light-red";
        this.textColor = "white";
    }
  }
}

<div class="mr-2 bg-{{this.color}} text-{{this.textColor}} p-2 pr-4 pl-4 rounded leading-none flex items-center justify-center font-semibold">
  {{this.status}}
</div>

When I click on table's header to sort rows it sorts all the info correctly but the info that is rendered using this custom component still the same. It doesn't change neither the label or the colors.

Which would be the best approach to get this to work? Am I missing something here?

Start with the provided EmberTable template, column definitions, and custom cell component, then reproduce sorting with rows whose values produce different labels and colors. Trace how sorted rows reach the custom component and verify that the rendered label and colors update for each row after sorting.