React Konva在拖动时更改zIndex

import React, { useState } from 'react';
import { Stage, Layer, Rect } from 'react-konva';

const App = () => {
  const [rectangles, setRectangles] = useState([
    { id: 1, x: 50, y: 50, width: 100, height: 100, zIndex: 1 },
    { id: 2, x: 200, y: 200, width: 100, height: 100, zIndex: 2 },
  ]);

  const handleDragStart = (e) => {
    const id = e.target.attrs.id;
    const updatedRectangles = rectangles.map((rect) => {
      if (rect.id === id) {
        return { ...rect, zIndex: rectangles.length + 1 };
      }
      return rect;
    });
    setRectangles(updatedRectangles);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {rectangles.map((rect) => (
          <Rect
            key={rect.id}
            x={rect.x}
            y={rect.y}
            width={rect.width}
            height={rect.height}
            fill="red"
            draggable
            zIndex={rect.zIndex}
            onDragStart={handleDragStart}
          />
        ))}
      </Layer>
    </Stage>
  );
};

export default App;