Why does my overlay not transition while rerendering? - reactjs

Question

I'm trying to transition a simple overlay if one of four thumbnails is clicked. My idea was to toggle the overlays opacity within the inline style of the element like this..
<div className='product-thumbnail-overlay' style={selectedThumbnail === id ? { opacity: 1 } : { opacity: 0 }}></div>
This is working until I wrap this code in a react function component to avoid repetitions of my code.
HTML
import { useState, useEffect } from 'react';
import './Product.scss';
import ProductImage1 from '../assets/images/image-product-1.jpg';
import ProductImage2 from '../assets/images/image-product-2.jpg';
import ProductImage3 from '../assets/images/image-product-3.jpg';
import ProductImage4 from '../assets/images/image-product-4.jpg';
import ProductThumbnail1 from '../assets/images/image-product-1-thumbnail.jpg';
import ProductThumbnail2 from '../assets/images/image-product-2-thumbnail.jpg';
import ProductThumbnail3 from '../assets/images/image-product-3-thumbnail.jpg';
import ProductThumbnail4 from '../assets/images/image-product-4-thumbnail.jpg';
const Product = () => {
const [selectedThumbnail, setSelectedThumbnail] = useState(1);
const getProductThumbnailById = (id) => {
// get the imported product thumbnail
};
const ProductThumbnail = ({ id }) => {
return (
<div className='product-thumbnail-container' onClick={() => setSelectedThumbnail(id)}>
<img src={getProductThumbnailById(id)} alt='thumbnail of product' className='product-thumbnail' />
<div
className='product-thumbnail-overlay'
style={selectedThumbnail === id ? { opacity: 1 } : { opacity: 0 }}
></div>
</div>
);
};
return (
<main>
<div className='product-images'>
<img src={ProductImage1} alt='product' className='product-image' />
<div className='product-thumbnails'>
<ProductThumbnail id={1} />
<ProductThumbnail id={2} />
<ProductThumbnail id={3} />
<ProductThumbnail id={4} />
</div>
</div>
<div className='product-details'></div>
</main>
);
};
export default Product;
important SCSS
.product-thumbnail-container {
position: relative;
flex: 20.5%;
cursor: pointer;
.product-thumbnail {
display: block;
max-width: 100%;
border-radius: variables.$br;
}
.product-thumbnail-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.6);
border: 2px solid variables.$clr_prim_orange;
border-radius: variables.$br;
transition: all 2000ms ease-in-out;
}
}
Codepen with what im trying to accomplish (but with repetitions of code): https://codepen.io/Sandhexer/pen/JjLrZOQ?editors=0110
Codepen with current code: https://codepen.io/Sandhexer/pen/gOeGKpP?editors=0110
I think that the rerendering causes the element not to transition because the opacity doesnt really change. Is this right and does anyone know a solution or good workaround for this problem?