Как решить это в реакции?

import React, { useState } from "react";
import "./style.css";

const Box = ({ onPress, style }) => {
  return <div style = {style} onClick = {onPress} className = "box" />;
};

export default function App() {
  /*
This is the main part of the app, here we create a state called checked which 
will hold the last two indexes of checked boxes, and based on that index, 
we will conditionally set the background color of the Box component to either 
red or blue. 
*/
  const [checked, setChecked] = useState([]);
  let array = Array.from({ length: 16 }, () => 0);
  // console.info(array);
  return (
    <div className = "container">
      {array?.map((_, index) => (
        <Box
          key = {index}
          onPress = {() => {
            let temp = [...checked];
            if (temp.length === 2) {
              temp.shift();
            }
            if (!temp.includes(index)) setChecked([...temp, index]);
          }}
          style = {{ backgroundColor: checked.includes(index) ? "red" : "blue" }}
        />
      ))}
    </div>
  );
}

Полный пример: Пример Stackblitz