Matter overlap help

Phaser 3
1

Updated

I am working on a project for school and want to create a quicksand effect where blocs sink into the ground. I am having a really hard time figuring out how to create this effect with MATTER physics which I need for my game to be expandable into what I want it to be.

For now I am using a platform behind a foreground asset that slowly increases its y value. At a glance it looks like the quicksand is working, but if anything falls to the ground after a few seconds the items just fall into the void and the quicksand effect is gone.

I have now managed to get the matter.image to ignore collisions with the items I want it to overlap, which is a step in the right direction. What I am now stuck on is the THIS.MATTER.OVERLAP method. I am following the documentation but I cannot seem to get the method to do anything. Can someone give me some guidance as to what I am doing wrong?

stoneWall.setCollidesWith([ blocks, platforms ]);
castleWall.setCollidesWith([ blocks, platforms ]);
treasureChest.setCollidesWith([ blocks, platforms ]);
castleBase.setCollidesWith([ blocks, platforms ]);
foreground.setCollidesWith([noCollide]);
platformLong.setCollidesWith([blocks, platforms]);

this.matter.world.on('collisionstart', function (event, bodyA, bodyB) {
  
  if(bodyB.label === 'platformLong') {

    event.pairs[0].bodyA.gameObject.setTint('0x757575');
    event.pairs[0].bodyA.gameObject.setCollisionGroup(cannotDrag);
  } 
});

this.matter.overlap(stoneWall, foreground, () => {
  console.log(this)
})