如何使用react或css在图片库中一次突出显示一张图像

import React, { useState } from 'react';

const ImageGallery = ({ images }) => {
  const [highlightedIndex, setHighlightedIndex] = useState(null);

  const handleClick = (index) => {
    setHighlightedIndex(index);
  };

  return (
    <div className="image-gallery">
      {images.map((image, index) => (
        <img
          key={index}
          src={image.url}
          alt={image.alt}
          className={highlightedIndex === index ? 'highlighted' : ''}
          onClick={() => handleClick(index)}
        />
      ))}
    </div>
  );
};

export default ImageGallery;

.image-gallery img {
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.image-gallery img.highlighted {
  border-color: red;
}