Custom Layers disappears after showing up briefly

I am working on a project where I need to display some dynamic content on a leaflet map basically a infotainment website. A simple version of the thing I am trying to do is display a custom layer where each tile has a different color. The code attached below shows the custom tiles but then it disappears I am not sure what might be the issue for this behaviour

EDIT As suggested by @mplungjan changing order seemed to solve the issue I am able to attain my expected result of only select tiles being shown over base OSM layer

function getRandomBoolean() {
    return Math.random() < 0.5;
}
var CustomGridLayer = L.GridLayer.extend({
  createTile: function(coords) {
    var size = this.getTileSize();
    console.log('--size--', size)

    var tile = L.DomUtil.create('canvas', 'leaflet-tile');

    tile.width = size.x;
    tile.height = size.y;
    var ctx = tile.getContext('2d');

    ctx.fillStyle = getRandomColor();
    ctx.fillRect(0, 0, size.x, size.y);

    // Add text to the tile
    ctx.fillStyle = 'white';
    ctx.font = 'bold 16px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Tile', size.x / 2, size.y / 2);

    if(!getRandomBoolean()) {
        tile.style.display = 'none';
    } 
    return tile;
  }
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

var customLayer = new CustomGridLayer({
  maxZoom: 18,
  tileSize: 256
});

var map = L.map('map', {
  center: [51.505, -0.09],
  zoom: 13
});



L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.addLayer(customLayer);
#map {
  height: 100vh;
}
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Leaflet Example</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>

<body>
  <div id="map"></div>
</body>

</html>