Gradient Disappears when Node is opened again

I’ve used following file to set the gradient on a node. The gradient is applied correctly the first time, but when I reopen the node, the background becomes white.
This is the code of ColorAssembler2D.ts file


import Logs from "./Logs";

const { ccclass, property,/* executeInEditMode,*/ requireComponent, menu } = cc._decorator;

@ccclass
// @executeInEditMode
@requireComponent(cc.RenderComponent)
@menu('i18n:MAIN_MENU.component.renderers/ColorAssembler2D-lamyoung.com')
export default class ColorAssembler2D extends cc.Component {

    @property
    private _whetherHorizontal: boolean = false;

    @property
    public get whetherHorizontal() {
        return this._whetherHorizontal;
    }
    public set whetherHorizontal(value) {
        this._whetherHorizontal = value;
        this._updateColors();
    }

    @property
    private _colors: cc.Color[] = [];
    @property({ type: [cc.Color] })
    public get colors() {
        return this._colors;
    }
    public set colors(colors) {
        this._colors = colors;
        this._updateColors();
    }

    onEnable() {
    try {
        cc.director.once(cc.Director.EVENT_AFTER_DRAW, this._updateColors, this);
    }
    catch (e) {
        Logs.printException("Exception in ColorAssembler2D - onEnable", e);
    }
    }

    onDisable() {
    try {
        cc.director.off(cc.Director.EVENT_AFTER_DRAW, this._updateColors, this);
        if(this.node == null || this.node == undefined)
        {
            return;
        }        
        // this.node['_renderFlag'] |= cc['RenderFlow'].FLAG_COLOR;
    }
    catch (e) {
        Logs.printException("Exception in ColorAssembler2D - onDisable", e);
    }
    }

    start() {
        try {
            this._updateColors();
        }
        catch (e) {
            Logs.printException("Exception in ColorAssembler2D - start", e);
        }
    }

    _updateColors() {
    try {
        const cmp = this.node.getComponent(cc.RenderComponent);
        if (!cmp) return;
        const _assembler = cmp['_assembler'];
        if (!(_assembler instanceof cc['Assembler2D'])) return;
        const uintVerts = _assembler._renderData.uintVDatas[0];
        if (!uintVerts) return;
        const color = this.node.color;
        const floatsPerVert = _assembler.floatsPerVert;
        const colorOffset = _assembler.colorOffset;
        let count = 0;
        const sp = this.node.getComponent(cc.Sprite);
        if (sp != undefined) 
        {
            /**
             * In case of ballebazzi "Congratulations_You_Won_Popup" no sprite was dragged in Sprite Component of "Panel_Base" and "Panel_Stroke" node AND ColorAssembler2D script was added to the same node.
             * Resulting in sf being null.
             * Now if we try to 'insetBottom' or 'insetRight' of sf as done below, it throws an exception that cannot read properties of null.
             * So instead of changing in the scene we added a null check for sf wherever it was used.
             */
            const sf = sp.spriteFrame;
            if (sp.type == cc.Sprite.Type.SIMPLE) {
                if (this.whetherHorizontal) {
                    for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
                        if (count%2 == 0) {
                            uintVerts[i] = (this.colors[0] || color)['_val'];
                        }
                        else {
                            uintVerts[i] = (this.colors[1] || color)['_val'];
                        }
                        count++;
                    }
                }
                else {
                    for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
                        if (Math.floor(count/2) == 0) {
                            uintVerts[i] = (this.colors[0] || color)['_val'];
                        }
                        else {
                            uintVerts[i] = (this.colors[1] || color)['_val'];
                        }
                        count++;
                    }
                }
            }
            else if (sp.type == cc.Sprite.Type.SLICED) {
                if (this.whetherHorizontal) {
                    for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
                        if (count%4 == 0) {
                            uintVerts[i] = (this.colors[0] || color)['_val'];
                        }
                        else if (count%4 == 1) {
                            let tempColor:cc.Color;
                            if(sf!=null && sf!=undefined)
                            {
                                tempColor = new cc.Color((this.colors[0].r * (this.node.width - sf.insetLeft) + this.colors[1].r * sf.insetLeft) / this.node.width, (this.colors[0].g * (this.node.width - sf.insetLeft) + this.colors[1].g * sf.insetLeft) / this.node.width, (this.colors[0].b * (this.node.width - sf.insetLeft) + this.colors[1].b * sf.insetLeft) / this.node.width, (this.colors[0].a * (this.node.width - sf.insetLeft) + this.colors[1].a * sf.insetLeft) / this.node.width);
                                uintVerts[i] = (tempColor || color)['_val'];
                            }
                        }
                        else if (count%4 == 2) {
                            let tempColor:cc.Color = new cc.Color();
                            if(sf!=null && sf!=undefined)
                            {
                                tempColor = new cc.Color((this.colors[0].r * sf.insetRight + this.colors[1].r * (this.node.width - sf.insetRight)) / this.node.width, (this.colors[0].g * sf.insetRight + this.colors[1].g * (this.node.width - sf.insetRight)) / this.node.width, (this.colors[0].b * sf.insetRight + this.colors[1].b * (this.node.width - sf.insetRight)) / this.node.width, (this.colors[0].a * sf.insetRight + this.colors[1].a * (this.node.width - sf.insetRight)) / this.node.width);
                                uintVerts[i] = (tempColor || color)['_val'];
                            }
                        }
                        else {
                            uintVerts[i] = (this.colors[1] || color)['_val'];
                        }
                        count++;
                    }
                }
                else {
                    for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {

                        if (Math.floor(count/4) == 0) {
                            uintVerts[i] = (this.colors[0] || color)['_val'];
                        }
                        else if (Math.floor(count/4) == 1) {
                            let tempColor:cc.Color;
                            if(sf!=null && sf!=undefined)
                            {
                                tempColor = new cc.Color((this.colors[0].r * (this.node.height - sf.insetBottom) + this.colors[1].r * sf.insetBottom) / this.node.height, (this.colors[0].g * (this.node.height - sf.insetBottom) + this.colors[1].g * sf.insetBottom) / this.node.height, (this.colors[0].b * (this.node.height - sf.insetBottom) + this.colors[1].b * sf.insetBottom) / this.node.height, (this.colors[0].a * (this.node.height - sf.insetBottom) + this.colors[1].a * sf.insetBottom) / this.node.height);
                                uintVerts[i] = (tempColor || color)['_val'];
                            }
                        }
                        else if (Math.floor(count/4) == 2) {
                            let tempColor:cc.Color = new cc.Color();
                            if(sf!=null && sf!=undefined)
                            {
                                tempColor = new cc.Color((this.colors[0].r * sf.insetTop + this.colors[1].r * (this.node.height - sf.insetTop)) / this.node.height, (this.colors[0].g * sf.insetTop + this.colors[1].g * (this.node.height - sf.insetTop)) / this.node.height, (this.colors[0].b * sf.insetTop + this.colors[1].b * (this.node.height - sf.insetTop)) / this.node.height, (this.colors[0].a * sf.insetTop + this.colors[1].a * (this.node.height - sf.insetTop)) / this.node.height);
                                uintVerts[i] = (tempColor || color)['_val'];
                            }
                        }
                        else {
                            uintVerts[i] = (this.colors[1] || color)['_val'];
                        }
                        count++;
                    }
                }
            }
        }


        const lb = this.node.getComponent(cc.Label);
        if (lb != undefined) {
            if (this.whetherHorizontal) {
                for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
                    if (count%2 == 0) {
                        uintVerts[i] = (this.colors[0] || color)['_val'];
                    }
                    else {
                        uintVerts[i] = (this.colors[1] || color)['_val'];
                    }
                    count++;
                }
            }
            else {
                for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
                    if (Math.floor(count/2) == 0) {
                        uintVerts[i] = (this.colors[0] || color)['_val'];
                    }
                    else {
                        uintVerts[i] = (this.colors[1] || color)['_val'];
                    }
                    count++;
                }
            }
        }
    }
    catch (e) {
        Logs.printException("Exception in ColorAssembler2D - _updateColors", e);
    }   
    }


}

Can someone please help me with this issue? What could be the possible reasons behind getting this and how can I solve it??

Try replacing

with cc.director.on(