Active Image in Carousel - css

Question

I have created an image carousel with an active image in the middle and all the images on the side and trying to show the active image on the side by adding a border around the image.
The border is being shown initially, but I am unable to see it after clicking on other images.
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;
}
Can anybody help me on this?