Next.js change Image src onClick (TS)

I am trying to create a gallery. Where many images will be created. Though I want my first image to be big[500 x 500 px] and rest of them [80 x 80px]. I want to change the large image src with the clicked imaged src. I have tried using ref. But its not working.

I am calling an api to get the images.

Currently I am trying with

 const imageRef = React.useRef<HTMLImageElement | null>(null);

 function handleImageClick(e: React.MouseEvent<HTMLImageElement>) {
    console.log(e.target)
    const target = e.target as HTMLImageElement
    imageRef.current!.src = target.src
  }

The return statement is

<Image
   ref={imageRef}
   src={imageRef.current?.src || thumbnailImage}
/>

From the smaller images list are as

{images.map((image: string, index: number) => (
    <Image
    onClick={handleImageClick}
    key={index}
    src={image}
/>
))}