Custom input renderer loses value when edit button is clicked

I'm trying to add a column that has an input of type "color". At first I was able to get it to work, but when the Edit button is clicked, the color value is lost(defaults to black).
If in editing mode I change the color, the new color gets saved, but the old color is not shown at first.

https://github.com/user-attachments/assets/39db848e-083a-4eb4-a0aa-d8a680ae24f3

I hope this video helps with the understanding, I don't know how to explain better in writing.
Here's the code:

color-input.component.ts
```typescript
import { Component, Input } from '@angular/core';
import { DefaultEditor } from 'ng2-smart-table';

@Component({
template: `

`,
})
export class CustomColorRenderComponent extends DefaultEditor {

private _value:string = "";
private _rowData:any = "";
@Input()
set value(val: string){
console.log("this",this);
console.log("value",val);
this._value = val;
}
get value(){
return this._value;
}

@Input()
set rowData(val: any){
console.log("this",this);
console.log("rowData",val);
this._rowData = val;
}
get rowData(){
return this._rowData;
}

updateValue(event, newValue: string) {
console.log(event)
console.log(newValue)
this.value = newValue;
this.cell.newValue = newValue;
}
}
```

fontes.component.html (what uses the custom color component and has the table)
```html


```

fontes.component.ts (what uses the custom color component and has the table)
```typescript
import {Component} from '@angular/core';
import {CustomColorRenderComponent} from '../../components/color-input.component';
import {LocalDataSource} from 'ng2-smart-table';
import {LoaderService} from '../../services/loader.service';

@Component({
selector: 'app-fontes',
templateUrl: './fontes.component.html',
styleUrls: ['./fontes.component.scss'],
})
export class FontesComponent {

data = [
{
id: 1,
name: 'Mark Rogers',
color: "#ee9638"
}];

settings = {
add: {
addButtonContent: '',
createButtonContent: '',
cancelButtonContent: '',

},
edit: {
editButtonContent: '',
saveButtonContent: '',
cancelButtonContent: '',
confirmSave: true
},
delete: {
deleteButtonContent: '',
confirmDelete: true,
},
columns: {
id: {
title: 'Id',
type: 'number'
},
name: {
title: 'Name',
type: 'string',
},
color:
{
title: "Cor",
type: "custom",
renderComponent: CustomColorRenderComponent,
editor: {
type: "custom",
component: CustomColorRenderComponent
},
}
},
};
source: LocalDataSource = new LocalDataSource();

constructor(private loaderService: LoaderService
) {
const data = this.getData();
this.source.load(data);
}

onCreateConfirm(event): void {

}

onDeleteConfirm(event): void {

console.log(event)
if (window.confirm('Are you sure you want to delete?')) {
console.log("Mandando requisição")
this.loaderService.showLoader()
setTimeout(() => {
event.confirm.resolve();
this.loaderService.hideLoader()
}, 2000);

} else {
console.log("Faz nada")
event.confirm.reject();
}
}

onEditConfirm(event): void {
console.log(event)
if (window.confirm('Are you sure you want to edit?')) {
console.log("Mandando requisição")
setTimeout(() => {
event.confirm.resolve();
}, 1000);

} else {
console.log("Faz nada")
event.confirm.reject();
}
}

getData() {
return this.data;
}
}
```