Little issue with css and areas

Hi,

I'm using the following code in the onBeforeEventRender:

if (data.layer === 7) {
                args.e.cssClass = `${args.e.cssClass} fas fa-times`;
            }

            if (!data.moveDisabled && !data.locked && data.pay_status !== "A" && data.pay_status !== "L") {        
                args.data.areas = [
                    {
                        right: 1,
                        top: 0,
                        height: 18,
                        width: 10,
                        cssClass: "draggable",
                        style: "cursor: move",
                        toolTip: self.addToClipboardTitle
                    }
                ];
            }

I want to display the blue X icon on the left when layer = 7 and I want to have the draggable icon at the end of the event on the right.

Instead I'm seeing both the X icon on the left and the draggable icon on the left. When layer!=7 it does display correctly on the far right.

Do you know what may be amiss?

Thanks in advance.