Collider doesn't work on that specific use case

[Sh4bang]

I have a room with a wall, I want my player does not go through the wall, so I need a collider.

The collider doesn't work with the commented code, but it works well with the uncommented one, which basically does the same thing in 2 separate commands.

// ...

function preload()
{
    this.load.atlas('background', 'dist/sprites/background.png', 'dist/sprites/background_atlas.json');
    this.load.spritesheet('zelda', 'dist/sprites/zelda_sprite.png', {frameWidth: 50, frameHeight: 50});
}

let walls;
let player;

function create()
{
    this.add.tileSprite(384, 288, 768, 576, 'background', 'ground.png');

    // -- THIS CODE DOESN'T WORK ---- 
    // walls = this.physics.add.staticGroup([
    //     { // Top
    //         key: 'background',
    //         frame: 'wall.png',
    //         repeat: 11,
    //         setXY: { x: 32, y: 32, stepX: 64 }
    //     },{ // Bottom
    //         key: 'background',
    //         frame: 'wall.png',
    //         repeat: 11,
    //         setXY: { x: 32, y: 544, stepX: 64 }
    //     }
    //     ,{ // Left
    //         key: 'background',
    //         frame: 'wall.png',
    //         repeat: 7,
    //         setXY: { x: 32, y: 96, stepY: 64 }
    //     }
    //     ,{ // Right
    //         key: 'background',
    //         frame: 'wall.png',
    //         repeat: 7,
    //         setXY: { x: 736, y: 96, stepY: 64 }
    //     }
    // ]);

    // -- I HAVE TO USE THAT CODE INSTEAD ---- 
    walls = this.physics.add.staticGroup();
    walls.createMultiple([
        { // Top
            key: 'background',
            frame: 'wall.png',
            repeat: 11,
            setXY: { x: 32, y: 32, stepX: 64 }
        },{ // Bottom
            key: 'background',
            frame: 'wall.png',
            repeat: 11,
            setXY: { x: 32, y: 544, stepX: 64 }
        }
        ,{ // Left
            key: 'background',
            frame: 'wall.png',
            repeat: 7,
            setXY: { x: 32, y: 96, stepY: 64 }
        }
        ,{ // Right
            key: 'background',
            frame: 'wall.png',
            repeat: 7,
            setXY: { x: 736, y: 96, stepY: 64 }
        }
    ]);

    player = this.physics.add.sprite(200, 250, 'zelda');
    player.setCollideWorldBounds(true);

    this.physics.add.collider(player, walls);
}

// ...

I'm fine with that solution, but I had hard time finding it. So, I would like to understand why the commented code is wrong.

Thanks for some explainations