Используется Реакт фреймворк Next.js Мне необходимо заменить тэг img на <Image>

Component (next-image) https://nextjs.org/docs/api-reference/next/image
JSX:
js
<ThumbContainer>
<Thumbnail
alt={title}
onError={handleImgError}
ref={placeholderRef}
src={thumbnails?.url}
/>
</ThumbContainer>

Style (styled components):
js
const ThumbContainer = styled.div`
position: relative;
cursor: pointer;
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 4px 4px 0 0;
`;

const Thumbnail = styled.img.attrs(() => ({ className: "thumbnail" }))`
color: white;
display: block;
width: 100%;
height: 100%;
background-color: white;
background-image: url("/images/catalog/video-placeholder.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
transition: transform 0.7s ease;
object-fit: cover;
`;

Как это сделать? Любые советы приветствуются. 🙂

as тебе в помощь) Должно помочь)

еще не умею такое. напиши строчку кода как это вообще сделать примерно