How to efficiently remove a component

[parthrc]

import { reloadIframe } from "../utils/grapesjs-utils.js";

const CustomRow = (editor) => {
  editor.Components.addType("custom-row", {
    isComponent: (el) =>
      el.tagName === "DIV" && el.classList.contains("custom-row"),

    model: {
      defaults: {
        tagName: "div",
        attributes: { class: "custom-row" },
        droppable: true,
        draggable: true,
        components: [
          {
            type: "custom-column",
          },
        ],
        style: {
          display: "flex",
          padding: "10px",
          "background-color": "#e0f0ff",
          color: "#000000",
          border: "1px solid #0454a8",
          "border-radius": "5px",
          "font-size": "16px",
          "min-height": "50px",
        },
      },

      init() {
        // this.on("component:update:components", this.adjustColumnWidths);
        // Listen to the component:add event to handle new components
        this.listenTo(this.components(), "add", this.adjustColumnWidths);
      },

      adjustColumnWidths(model) {
        const columns = this.components();
        const columnCount = columns.length;
            // Limit to a maximum of 4 columns
        if (columnCount > 4) {
        
          // get the id of newly added comp and remove it
          // find the index of the newly added comp in columns

          const newComp = columns.models.find((i) => i.cid === model.cid);
 

          newComp.remove();
          console.log("After removing", this.components());
          // editor.Canvas.refresh();
          reloadIframe(editor);
        }
  
        // set widths based on number of columns by updating the style trait
        columns.each((column, index) => {
          console.log("Each column=", column);
          console.log("Each column=", column.attributes.type);
          const currentStyle = column.getStyle();
          if (index < 4) {
            column.setStyle({
              ...currentStyle,
              width: `${100 / Math.min(columnCount, 4)}%`,
            });
            // wrap newly added comp in custom-column
          }
        });
      },
    },

    view: {
      onRender() {
        console.log("CustomRow rendered");
      },
    },
  });

  editor.BlockManager.add("custom-row", {
    label: "Custom Row",
    category: "Layout",
    content: { type: "custom-row" },
  });
};

export default CustomRow;

in above code i have created a custom component where if we try to drag fifth component it will remove it.
But after newComp.remove(), the component is removed, does not show up in layers, does not show up in this.components() but stills appears in the canvas and is selected.
Only if i manually reload the frame it disappears.
But reloading frame causes other problems makes the other components not editable, which i dont want
What is the best way to remove components in this case?

[artf]

No need to remove the component, just use droppable as a function and check the number of current children components.
https://grapesjs.com/docs/api/component.html#properties