I'm rendering a Canvas component in react, which return a list of <rect> elements, what Im trying to achieve is to change the color of the clicked <rect> only, however in my code whenever i click on one of the elements, the complete list of elements are updated, how can i update the clicked <rect> element only?

below is my code:

import { useState } from "react";
import styles from "./Canvas.module.css";

let data = [
  {
    id: "1",
    x: "50",
    y: "20",
  },
  {
    id: "2",
    x: "90",
    y: "20",
  },
  {
    id: "3",
    x: "130",
    y: "20",
  },
];

const Canvas = () => {
  const [redRectangle, setRedRectangle] = useState();

  const setColorHandler = () => {
    setRedRectangle(styles.rect);
  };

  let arr = data.map((element) => {
    return (
      <rect
        className={redRectangle}
        key={element.id}
        width="30"
        height="4"
        x={element.x}
        y={element.y}
        onClick={setColorHandler}
      />
    );
  });

  return (
    <svg width="800" height="600" id="svg">
      {arr}
    </svg>
  );
};

export default Canvas;

before running the code

after clicking on one <rect>