如何在ReactJS中获得选定的div元素颜色更改和存储每个选定的Div元素的状态？

import React, { useState } from 'react';

const ColorChangeComponent = () => {
  const [selectedDivs, setSelectedDivs] = useState([]);

  const handleDivClick = (divId) => {
    // 切换选定的div元素的状态
    if (selectedDivs.includes(divId)) {
      setSelectedDivs(selectedDivs.filter(id => id !== divId));
    } else {
      setSelectedDivs([...selectedDivs, divId]);
    }
  };

  return (
    <div>
      <div
        id="div1"
        onClick={() => handleDivClick("div1")}
        style={{ backgroundColor: selectedDivs.includes("div1") ? "red" : "initial" }}
      >
        Div 1
      </div>
      <div
        id="div2"
        onClick={() => handleDivClick("div2")}
        style={{ backgroundColor: selectedDivs.includes("div2") ? "blue" : "initial" }}
      >
        Div 2
      </div>
      {/* 其他div元素 */}
    </div>
  );
};

export default ColorChangeComponent;