Display picture on mouse hover over link

on may page I have a list of three links. I want an image to appear at the cursor position when it hovers over the link. Unfortunately the same image appears over all three links. I need the picture to be different for each link.

let attached = false;
 
let imageContainer = document.querySelector("#image");

const followMouse = (event) => {
  imageContainer.style.left = event.x + "px";
  imageContainer.style.top = event.y + "px";
}

function showImage() {
  if (!attached) {
    attached = true;
    imageContainer.style.display = "block";
    document.addEventListener("pointermove", followMouse);
  }
}

function hideImage() {
  attached = false;
  imageContainer.style.display = "";
  document.removeEventListener("pointermove", followMouse);
}

#image {
  position: fixed;
  display: none;
  pointer-events: none;
}

<a href="#"onpointerenter="showImage()" onpointerleave="hideImage()">COLUMNS</a>
                                              
<div id="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Mammisi_Philae2.JPG/340px-Mammisi_Philae2.JPG"></div>


<a href="#"onpointerenter="showImage()" onpointerleave="hideImage()">ROOF</a>
                                              
<div id="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Strasbourg_Aubette_03.jpg/384px-Strasbourg_Aubette_03.jpg"></div>

<a href="#"onpointerenter="showImage()" onpointerleave="hideImage()">ROOF</a>
                                              
<div id="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/126_rue_de_rivoli_Paris_2012_10.jpg/340px-126_rue_de_rivoli_Paris_2012_10.jpg"></div>

Is there a simple way to show a different picture for each link? Can it be achieved by passing a different image src for each link to the JS showImage function? Thank you for your answers in advance.