Aggregation issue when using extended custom button with DragAndDrop from controller

[Afsal]

I have created a custom control extending m.button to make the button as a drop target

sap.ui.define([
    "sap/m/Button"  
], function (Button) {
    "use strict";
    return Button.extend("dr.draggable.controller.DropButton", {
        metadata: {
            dnd: {
                droppable: true,
                dropInfo: {
                          drop: "onDrop" //the function in main controller
                }
            },
        },
        renderer: {},
    })
})

When it used in the XML, It worked fine and the dropable functionality is working.

<control:DropButton text="Category" press="onSelectCategory">
    
    <control:dragDropConfig>

        <dnd:DropInfo drop="onDrop"/>

    </control:dragDropConfig>
 </control:DropButton>

Now, I need to create and append multiple such buttons to a panel from my main controller like below

var parentContainer = this.getView().byId("myPanel");
//this code is in a forEach where `categoryData` represents each record from a JSON model
const custButton = new DropButton({
                    text: categoryData.name,
                    press: this.onSelectCategory.bind(this),
                    drop: this.onDrop.bind(this)
                });
                
parentContainer.addAggregation("content", catButton);

When it is used in this manner, It creates the buttons and all functionalities specific to the button control is working like firing functions on click.
But it is missing the droppable functionality.

My understanding is that somehow I need to create the aggregated content such as  dragDropConfig  and DropInfo separately and add it to the button. But not sure how.

Any expert opinion on aggregation from controller?