Why the Component Definition is Not Override for the same exisiting component

[RakulAgn]

import { Editor } from "grapesjs";
import { TraitsType } from "../../../../constant";

const type = "mj-button";
const tagName = "MJ-BUTTON";
const name = "Button";

export const CustomMJButton = (editor: Editor) => {
  editor.DomComponents.addType(type, {
    isComponent: (el) => el.tagName === tagName,
    model: {
      defaults: {
        tagName: tagName,
        name: name,
        traits: [
          {
            type: TraitsType.ButtonTextTrait,
            name: TraitsType.ButtonTextTrait,
          },
          {
            type: TraitsType.ButtonRedirectUrlTrait,
            name: TraitsType.ButtonRedirectUrlTrait,
          },
        ],
        draggable:
          "[data-gjs-type='mj-body'], [data-gjs-type='mj-section'], [data-gjs-type='mj-column']",
        highlightable: false,
        "style-default": {
          ...editor.Components.getType(type)?.model.prototype.defaults[
            "style-default"
          ],
          "background-color": "transparent !important",
        },
        unstylable: [
          "border-width",
          "border-style",
          "border-color",
          "background-url",
          "vertical-align",
        ],
        stylable: [
          "width",
          "height",
          "background-color",
          "line-height",
          "letter-spacing",
          "container-background-color",
          "font-style",
          "font-size",
          "font-weight",
          "font-family",
          "color",
          "text-decoration",
          "align",
          "text-transform",
          "padding",
          "padding-top",
          "padding-left",
          "padding-right",
          "padding-bottom",
          "inner-padding",
          "border-radius",
          "border-top-left-radius",
          "border-top-right-radius",
          "border-bottom-left-radius",
          "border-bottom-right-radius",
          "border",
        ],
        icon: `<svg viewBox="0 0 24 24">
        <path fill="currentColor" d="M20 20.5C20 21.3 19.3 22 18.5 22H13C12.6 22 12.3 21.9 12 21.6L8 17.4L8.7 16.6C8.9 16.4 9.2 16.3 9.5 16.3H9.7L12 18V9C12 8.4 12.4 8 13 8S14 8.4 14 9V13.5L15.2 13.6L19.1 15.8C19.6 16 20 16.6 20 17.1V20.5M20 2H4C2.9 2 2 2.9 2 4V12C2 13.1 2.9 14 4 14H8V12H4V4H20V12H18V14H20C21.1 14 22 13.1 22 12V4C22 2.9 21.1 2 20 2Z" />
        </svg>`,
        attributes: {
          "css-class":
            "button-font-style  button-font-family button-font-size button-text-alignment button-letter-spacing button-font-color button-line-height button-border button-border-color button-shape button-bg-color button-size",
        },
      },
    },
  });

  console.log(
    editor.Components.getType(type)?.model.prototype.defaults["style-default"]
  );
};

I am trying to the change the default background-color for button but its still persist the same default color whats the issue here ?

this is the reference https://grapesjs.com/docs/modules/Components.html#update-component-type