Objetivo Estoy tratando de generar programáticamente una matriz de cuadrados de colores como la de la imagen.

Detalles Que teóricamente se divide en 4 cuadrantes, lo que significa que el segundo a la derecha es el más vívido mientras que los otros tres son menos vívidos porque tienen menos significado.

Problema Tengo problemas para agregar la serie correctamente para hacerlo, parece que se superponen entre sí y producen un resultado no deseado.

Aquí hay un enlace a una caja de arena: https://codesandbox.io/s/misty-breeze-3ywu2q?file=/src/App.js