Recursive Squares + Random color generator

App.js

function ColorGenerator() {
  let index = 0;
  const colors = ["red", "green", "blue", "yellow", "black", "white"];

  const rand = (s, e) => Math.random() * (e - s + 1);
  return {
    generate: () => colors[index++ % colors.length],
    generateRGB: () => `rgb(${rand(0, 255)}, ${1}, ${rand(0, 255)})`
  };
}

const cg = ColorGenerator();

function Square({ count = 1, split = false, height, width, margin = 1 }) {
  if (count === 0) {
    return null;
  }

  if (split && count === 1) {
    return (
      <div
        style={{
          backgroundColor: cg.generateRGB(),
          height,
          width
        }}
      />
    );
  }
  return (
    <div className="container" style={{ height, width }}>
      <Square count={count - 1} split height={height / 2} width={width / 2} />
      <Square count={count - 1} split height={height / 2} width={width / 2} />
      <Square count={count - 1} split height={height / 2} width={width / 2} />
      <Square count={count - 1} split height={height / 2} width={width / 2} />
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Square count={5} height={400} width={400} />
    </div>
  );
}