"Grid Lights" Solution

App.js

import { useState, useEffect, useMemo } from "react";

export default function App() {
  return <Table data={table} />;
}

const DELAY = 300;

const table = [
  [[1], [1], [1]],
  [[1], [0], [1]],
  [[1], [1], [1]],
];

function Table({ data = [] }) {
  const [order, setOrder] = useState([]);
  const [isDeactivating, setIsDeactivating] = useState(false);
  const activeSet = useMemo(() => new Set(order), [order]);

  const flatData = useMemo(() => data.flat(2), [data]);
  const activeCells = useMemo(() => flatData.filter((val) => val !== 0).length, [flatData]);

  useEffect(() => {
    if (!isDeactivating) return;

    if (order.length === 0) {
      setIsDeactivating(false);

      return;
    }

    const timer = setTimeout(() => {
      setOrder((prev) => prev.slice(0, -1));
    }, DELAY);

    return () => {
      clearTimeout(timer);
    };
  }, [isDeactivating, order.length]);

  const handleClick = (index) => {
    if (isDeactivating || activeSet.has(index)) return;

    const nextOrder = [...order, index];
    setOrder(nextOrder);

    if (nextOrder.length === activeCells) {
      setIsDeactivating(true);
    }
  };

  return (
    <div className="table">
      {flatData.map((val, i) => (
        <Cell
          key={i}
          index={i}
          isActive={activeSet.has(i)}
          isDisabled={val === 0}
          onClick={handleClick}
        />
      ))}
      <div>{order.join(", ")}</div>
    </div>
  );
}

function Cell({ index, isActive, isDisabled, onClick }) {
  return (
    <button
      className="cell"
      data-active={isActive}
      disabled={isDisabled}
      onClick={() => onClick(index)}
    />
  );
}