PIXI.js Event Handlers Not Working, Sprite Bounds Way Too Small

I am creating an interactive app with pixi.js.

In this app, I have some sprites that I want to drag and drop.

I have created these Sprites by extending the Sprite class and adding some additional logic to the constructor as follows:

export class Tangible extends Sprite {
/**
 * Base Class for all tangibles
 */
constructor(texture, id) {
    super(texture);
    this.id = id;

    this.scale.set(0.1);

    // enable the tangible to be interactive... this will allow it to respond to mouse and touch events
    this.interactive = true;

    // this button mode will mean the hand cursor appears when you roll over the tangible with your mouse
    this.buttonMode = true;

    // center the tangible's anchor point
    this.anchor.set(0.5, 0.5);

    // setup events for mouse + touch using
    // the pointer events
    this
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointerover', onPointerOver)
        .on('pointerout', onPointerOut)
        .on('pointermove', onDragMove);

}

getId() {
    return this.id;
}

drawBounds() {
    console.log("DRAWING BOUNDS EXCEPT NOT REALLY");
    let bounds = this._bounds.getRectangle();
    let boundsArea = new Graphics();
    boundsArea.beginFill(0xffffff);
    boundsArea.lineStyle(4, 0xffffff, 1);
    boundsArea.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
    boundsArea.endFill();
    this.parent.addChild(boundsArea);
}

}

onDragStart, onDragEnd, and onDragMove are methods defined outside the class and match the code given here:

https://pixijs.io/examples/#/demos/dragging.js

onPointerOver and onPointerOut are debugging methods i've added that just contain console.logs to let me know if they're working (they're not).

Each of these sprites is stored inside the following container class during the main set up:

export class Drawer extends Container { 
/**
 * Constructs a new Drawer object, for holding tangibles.
 * @param init_x The initial x position of the drawer area on the canvas
 * @param init_y The initial y position of the drawer area on the canvas
 * @param init_w The initial width of the drawer area.
 * @param init_h The initial height of the drawer area.
 *
 * @param open_x The x position of the drawer when it's open.
 * @param closed_x The x position of the drawer when it's closed.
 */
constructor(init_x, init_y, init_w, init_h, open_x, closed_x, capacity) {
    super();
    this.x = init_x, this.y = init_y, this.w = init_w, this.h = init_h;
    this.drawerArea = this.createDrawerArea(0, 0, init_w, init_h);
    this.addChild(this.drawerArea);

    this.interactive = true;

    this.open_x = open_x;
    this.closed_x = closed_x;

    this.num_tangibles = capacity;
    this.tangibles = {};

    this.closeDrawer();
}

addTangible(tangible) {
    let tId = tangible.getId();
    let hPad = 100;
    if(!(tId in this.tangibles) || (this.tangibles[tId] == null)) {
        this.tangibles[tId] = tangible;
        tangible.x = hPad + tangible.width + (this.width - (2 * hPad)) * (tId / (this.num_tangibles - 1)); // const is left padding
        console.log('tw: ' + tangible.width + ' ts: ' + tangible.scale);
        tangible.y = this.height * 0.5;
        console.log('tangible.x: ' + tangible.x + 'tangible.y: ' + tangible.y);
        this.addChild(tangible);
    } else {
        // some logic that places it somewhere else
    }
}

removeTangible(tangible) {
    let tId = tangible.getId();
    if((tId in this.tangibles) && (this.tangibles[tId] != null)) {
        this.tangibles[tangible.getId()] = null;
        // remove piece from drawer and close drawer
    } else {
        // throw an error? This should basically never happen
    }
}

openDrawer() {
    console.log("open_x: " + this.open_x);
    // this.drawerArea.x = this.open_x;
    this.x = this.open_x;
    for(var key in this.tangibles){
        this.tangibles[key].drawBounds();
    }
}

closeDrawer() {
    // this.drawerArea.x = this.closed_x;
    this.x = this.closed_x;
}

createDrawerArea(x, y, w, h) {
    // Create area outline
    let drawerArea = new Graphics();
    drawerArea.beginFill(0x68a2ff);
    drawerArea.lineStyle(4, 0xcccccc, 1);
    drawerArea.drawRect(x, y, w, h);
    drawerArea.endFill();
    return drawerArea;
}
}

Each of the event handler / functions have console.log statements to let me know when they are actually being hit.

onDragMove is being called any time the cursor moves, regardless of whether the cursor is over one of these sprites, or even whether it's over the pixi canvas.

I can see that when I mouse down and then mouse up (click, or click drag) over one of the sprites, onDragEnd is being called.

onDragStart is never called though.

In an attempt to debug, I've added a method to draw the _bounds of each sprite, and am seeing that for some reason, the bounds are extremely tiny relative to the sprites. This seems really weird to me, and I don't know why that would be the case.

Some other information that might be helpful - The containers that hold the sprites move off and onto the canvas activated by button presses. When this happens, I move the entire container and the sprites move with it, as expected.

    $("#some-drawer").on('click', function() {
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
        gmCanvas.someDrawer.closeDrawer();
    } else {
        $(this).addClass('active');
        gmCanvas.someDrawer.openDrawer();
    }
});

Any help is appreciated, really stuck on this one. Thanks!