Phaser.js coordinate collisions between two layers

So, I have two layers, objLayer, and BGLayer

So, the wooden bridge, is non colliding, allowing the player to pass through, however, the water underneath it is colliding, and will not let the player pass through.

Assuming I cant just replace the water tile, because I need the bridge to be removable with the water still showing below, how can I Make the player cross the bridge, and the water, but not just water?

EDIT:
I'm using a tiled tileset property for collisions, as I have more than just water tiles to collide with

this.BGLayer.setCollisionByProperty({ collides: true });
this.objLayer.setCollisionByProperty({ collides: true });
const debugGraphics = this.add.graphics().setAlpha(0.75);
       this.worldLayer.renderDebug(debugGraphics, {
        tileColor: null, // Color of non-colliding tiles
        collidingTileColor: new Phaser.Display.Color(243, 134, 48, 255), // Color of colliding tiles
        faceColor: new Phaser.Display.Color(40, 39, 37, 255), // Color of colliding face edges
      });

So I added the function in collide callback,

this.physics.add.collider(this.player, this.BGLayer);
    this.physics.add.collider(this.player, this.objLayer, function () {
      let tile = this.objLayer.getTileAtWorldXY(this.player.x, this.player.y);
      if (tile != null && tile.index == 16) {
        console.log("bridge")
        return false;
      }
      return true;
    });

However it gives a bug if put in BGLayer, and putting it in obj layer also does nothing?

Well you can use the processCallback of the collider function (details phaser docs).

In that function you can check, if the player is on a bridge-tile. if so the processCallback function should return false in all other cases return true.

<!-- langauge: lang-js -->

...
this.physics.add.collider( player, water, collideCallback, processCallback, this);
...

The processCallback could look something like this:

<!-- langauge: lang-js -->

function processCallback(){
    let tile = objLayer.getTileAtWorldXY(player.x, player.y);
    if ( tile && tile.index == BRIDGE_TILE_INDEX ){
        return false;
    }
    return true;
}

Update:

Example adapted to your code:

this.physics.add.collider(this.player, this.objLayer, function (){
        // ... you could put some code
    }, 
    function () {
        let tile = this.objLayer.getTileAtWorldXY(this.player.x, this.player.y);
        if (tile != null && tile.index == 16) {
            console.log("bridge")
            return false;
         }
         return true;
 });