轮播中的活动图像

如何解决轮播中的活动图像

我创建了一个图像轮播，中间有一个活动图像，侧面是所有图像，并试图通过在图像周围添加边框来在侧面显示活动图像。

最初显示边框，但单击其他​​图像后我无法看到它。

Imagedisplay.js：

import React,{useState} from 'react';
import {SideBySideMagnifier} from 'react-image-magnifiers';
import '../CSS/imagedisplay.css';

function Imagedisplay({product}) {
    const image = typeof(product.images) ==='object' ? product.images[0].props.src: product.images;
    const [current,setCurrent] = useState(image);     
    
    const handleClick = (e) =>{
        setCurrent(e.target.src);
    }

    return (
        <div className='carousel'>
        <div className='images'>
     {typeof (product.images)==='object' ? product.images.map( (item,idx) => 
    (
        <div key={idx.toString()} className='small-images' onClick={handleClick}>
            <img  className={item.props.src===current ? 'selected': ' '} src= {item.props.src} alt=''/>
        </div>
     )
     ) : 
     ( <div className='small-images'><img src={product.images} alt={product.name}/></div>)}
     </div>
     <div className='container'>
         <SideBySideMagnifier className='magnifier' alwaysInPlace={true} imageSrc={current} imageAlt='present' largeImageSrc={current}/>
    </div>
    </div>
    )
}

export default Imagedisplay;

CSS：

.carousel{
    display:flex;
}

.images{
    height:100vh;
    overflow: scroll;
}

.small-images img {
    width:5vw;
    height:5vw;
    object-fit:contain;
    margin:20px 20px 20px 0;
    display:block;
    cursor:pointer;
}

/* .magnifier{
    height: 80%;
  } */

.magnifier > div {
    display: flex;
    height:80%;
  }

.magnifier>div>img {
    max-height: 500px;
    max-width: 600px;
    margin: 100px;
    width: auto !important;
    object-fit:contain; /* should be removed from inline styles */
  }

  .selected{
    border:1px solid #F26241;
  }

有人可以帮我吗？