Problem with the collision system

So,I did the very basic tutorial for phaser 3, which is a platformer. Following along those lines, I made my own custom platform(Striped Wavy Platform) and a custom player sprite(Red Amoeba) but somehow the collision is not working between the platform and the player .. Below are my screenshots followed by the code. Initial state

Final state: the amoeba sunk to the bottom

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8" />     <title>Making your first Phaser 3 Game - Part 2</title>     <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"</script>     <style type="text/css">         body {             margin: 0;         }     </style> </head> <body>  <script type="text/javascript">      var config = {         type: Phaser.AUTO,         width: 800,         height: 600,         physics: {                              //for physics system           default: 'arcade',           arcade: {             gravity: { x: 200,                       y: 300},             debug: false           }         },         scene: {             preload: preload,             create: create,             update: update         }     };      var level;     var player;      var game = new Phaser.Game(config);      function preload ()     {         this.load.image('amoeba', 'PlatformerJam/amoeba.png');         this.load.image('ground', 'PlatformerJam/level_ground.png');         this.load.image('air', 'PlatformerJam/air_particle.png');     }      function create ()     {       level = this.physics.add.staticGroup();       level.create(400,300,'ground');        player = this.physics.add.sprite(400,300,'amoeba');       player.setBounce(0.2);        player.setCollideWorldBounds(true);            this.physics.add.collider(level,player);       }      function update ()     {     }  </script>  </body> </html>