Drag and DropZone (s)

Phaser 3
1

Hello,

Just trying Phaser 3 and I’m a little stuck, searched the docs but could not figure out.
I’m building a simple Matching Game and I have multiple images on the left and their shadows on the right. The story is that the user drags the left shapes into their corresponding shadows on the right.

I’ve managed to make the layout, drag and drop but can not figure how to add blocking for dropzones, allowing the left images to be dropped only in their matching shadows. I found a target prop but it seems that is not working.

  let squareShadow = this.add.image(700, 150, 'squareShadow').setInteractive();
    squareShadow.input.dropZone = true;

    let triangleShadow = this.add.image(700, 400, 'triangleShadow').setInteractive();
    triangleShadow.input.dropZone = true;

    let triangle = this.add.sprite(150, 150, 'triangle').setInteractive();
    triangle.input.target = triangleShadow;
    this.input.setDraggable(triangle);


    let square = this.add.sprite(150, 400, 'square').setInteractive();
    square.input.target = squareShadow;
    this.input.setDraggable(square);


    this.input.on('drag', function (pointer: any, gameObject: any, dragX: any, dragY: any) {
        gameObject.x = pointer.x;
        gameObject.y = pointer.y;
    });

    this.input.on('drop',   (pointer: any, gameObject: any, dropZone: any) => {
        gameObject.x = dropZone.x;
        gameObject.y = dropZone.y;
    });

Thanks