REACT TileGrid tiles overlap

[Hirn]

I have a simple code with Tile Grid in which I use my own tiles. The problem is that these tiles overlap each other when displayed on the screen

Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import { TileGrid } from 'smartclient-pro/react';
const root = ReactDOM.createRoot(document.getElementById('app'));
const colors = [
  "0x000000", "0x9B9B9B", "0x800000", "0xD6D6D6", "0xE6E6E6", "0xFFFFFF", "0x13BF13", "0xE5E617", "0xBF1313", "0x000000",
  "0x800000", "0x9B9B9B", "0xD6D6D6", "0xE6E6E6", "0xFFFFFF", "0x13BF13", "0xE5E617", "0xBF1313", "0x000000", "0x9B9B9B",
  "0x800000", "0xD6D6D6", "0xE6E6E6", "0xFFFFFF", "0x13BF13", "0xE5E617", "0xBF1313", "0x000000", "0x800000", "0x9B9B9B",
  "0xD6D6D6", "0xE6E6E6", "0xFFFFFF", "0x13BF13", "0xE5E617", "0xBF1313", "0x000000", "0x9B9B9B", "0x800000", "0xD6D6D6",
  "0xE6E6E6", "0xFFFFFF", "0x13BF13", "0xE5E617", "0xBF1313", "0x000000", "0x9B9B9B", "0x800000", "0xD6D6D6", "0xE6E6E6",
  "0xFFFFFF", "0x13BF13", "0xE5E617", "0xBF1313", "0x000000", "0x9B9B9B", "0x800000", "0xD6D6D6", "0xE6E6E6", "0xFFFFFF",
  "0x13BF13", "0xE5E617", "0xBF1313", "0x000000", "0x9B9B9B", "0x800000", "0xD6D6D6", "0xE6E6E6", "0xFFFFFF", "0x13BF13",
  "0xE5E617", "0xBF1313", "0x000000", "0x9B9B9B", "0x800000", "0xD6D6D6", "0xE6E6E6", "0xFFFFFF", "0x13BF13", "0xE5E617",
  "0xBF1313", "0x000000", "0x9B9B9B", "0x800000", "0xD6D6D6", "0xE6E6E6", "0xFFFFFF", "0x13BF13", "0xE5E617", "0xBF1313"
];
const isc = window.isc;
const stringsToObjects = function (strings, property) {
  if (!strings) return null;
  let objects = [];
  for (let string of strings) {
    objects.push({
      [property]: string
    });
  }
  return objects;
};
const getColor = function (color) {
  if (color == null) {
    return "#000000";
  }
  if (color.indexOf("0x") == 0) {
    color = color.replace("0x", "#");
  } else if (color.indexOf("#") != 0) {
    try {
      color = "#" + Integer.toHexString(Integer.parseInt(color));
    }
    catch (error) {
      color = "#000000";
    }
  }
  return color;
};
root.render(
  <TileGrid data={stringsToObjects(colors, "value")}
    width="50%" height="100%" tileWidth="30" tileHeight="30"
    tileMargin="5"
    showAllRecords="true"
    createTile={function (record, tileIndex) {
      let color = getColor(record["value"]);
      let tile = isc.Canvas.create({
        backgroundColor: color,
        canHover: true,
        getHoverHTML: function () {
          return color;
        }
      });
      return tile;
    }}
  />
);

Version SNAPSHOT_v13.1d_2024-10-18/Pro Deployment (2024-10-18)

Screenshot