Why React App Not Rendering Matrix on Screen?

1.Create a 3x3 matrix 2.When you click on a box - color should change to green 3.When you click on the last box, all colors should change to orange in sequence of their clicks (original clicks)

I'm working on a React application where I have a component called Matrix that is supposed to display a 3x3 matrix. However, I'm facing an issue where the matrix is not rendering on the screen when I run the application.

Here's the relevant code:

Matrix.js

import React, { useState } from "react"; // Import React

const Matrix = () => {
  const [boxes, setBoxes] = useState([
    ["white", "white", "white"],
    ["white", "white", "white"],
    ["white", "white", "white"]
  ]);

  const handleClick = (row, column) => {
    const newBoxes = [...boxes];
    newBoxes[row][column] = "green";
    setBoxes(newBoxes);
  };

  const handleLastBoxClick = () => {
    const newBoxes = [...boxes];
    for (let i = 0; i < boxes.length; i++) {
      for (let j = 0; j < boxes[i].length; j++) {
        newBoxes[i][j] = "orange";
      }
    }
    setBoxes(newBoxes);
  };

  return (
    <div>
      <h1>Matrix</h1>
      <div className="matrix">
        {boxes.map((row, i) => (
          <div key={i} className="row">
            {row.map((cell, j) => (
              <div
                key={j}
                className="cell"
                style={{ background: cell }}
                onClick={() => handleClick(i, j)}
              />
            ))}
          </div>
        ))}
      </div>
      <button
        onClick={() => handleLastBoxClick()}
        disabled={boxes[2][2] !== "green"}
      >
        Change all colors to orange
      </button>
    </div>
  );
};

export default Matrix;

App.js

import React from "react";
import Matrix from "./Matrix";

function App() {
  return (
    <div className="App">
      <Matrix />
    </div>
  );
}

export default App;

Checked for Errors: I opened the browser's developer console and looked for error messages in the console. No errors were reported.

Boxes are displaying in HTML, but divs are empty. You can see this by changing the style property to this:

style={{ backgroundColor: "red", width: "30px", height: "30px", borderStyle: "double" }}