Error when including a custom component inside another block

Sorry for the vague title. I'm not sure how to describe this concisely. I have a custom block where i want to restrict that only images can be dropped into a certain part of the block. I tried something like this:

  comps.addType('image-container', {
    model: defaultModel.extend({
      // Extend default properties
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        // Can only drop these elements inside it
        droppable: "img",
      }),
    },
    {
      isComponent: function(el) {
        if(el.tagName == 'DIV' && $(el).hasClass("image-container")){
          return {type: "image-container"};
        }
      },
    })
  });

  blockManager.add('test-with-image-container', {
    label: 'Test Block With Image Container',
    attributes: {class:'fa fa-pencil'},
    content: '<div class="test-block">You can drop an image below:<div class="image-container"></div></div>',
    category: 'Blocks',
  });

However, when I do this, trying to drag the block off the block palette raises the following error:

... grapes.min.js:2 Uncaught TypeError: s is not a constructor at F.i.addToCollection (VM6196 grapes.min.js:2) at VM6196 grapes.min.js:2 at Function.C.each.C.forEach (VM6196 grapes.min.js:2) at F.i.each (VM6196 grapes.min.js:2) at F.i.render (VM6196 grapes.min.js:2) at F.i.renderChildren (VM6196 grapes.min.js:2) at F.i.render (VM6196 grapes.min.js:2) at F.i.addToCollection (VM6196 grapes.min.js:2) at F.i.addTo (VM6196 grapes.min.js:2) at y (VM6196 grapes.min.js:2) ...

Any advice? Is there a better way to accomplish what I want to do?

Thanks!