Objective I'm trying to generate programatically a matrix of colored squares like the one on the picture.

Details Which is theoretically divided in 4 quadrants, meaning the second-right one is the more vivid one whilst the other three are less vivid because they have less meaning.

Problem I'm having problems adding the series correctly to do so, they seem to overlap each other and produce an unwanted result.

Here's a link to a sandbox: https://codesandbox.io/s/misty-breeze-3ywu2q?file=/src/App.js