How to set different background depending on hotspot hover

Question

How would like to modify this codepen https://codepen.io/varcharles/pen/qNQpRv When hovering a red dot the box on right should change is background related on which hotspot is selected. So, four different images related to 4 different hotspots.

const dataField = document.querySelector('.data');

const points = [
  {
    x: '30px',
    y: '50px',
data: 'Targeting Lasers',
    
  },
  {
    x: '460px',
    y: '210px',
    data: 'Targeting Lasers'
  },
  {
    x: '250px',
    y: '350px',
    data: 'Sheild Generators'
  },
  {
    x: '3890px',
    y: '550px',
    data: 'Sensor Array'
  }
];

points.forEach((point) => {
  let img = document.createElement('img'); 
  img.style.left = point.x;
  img.style.top = point.y;
  img.title = point.data;
  img.className= 'overlay-image';
  img.src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544303/Target_Logo.svg"
  overlay.appendChild(img);
  img.data = point.data;
  img.addEventListener('mouseenter', handleMouseEnter);
  img.addEventListener('mouseleave', handleMouseLeave);
});

function handleMouseEnter(event) {
  dataField.innerHTML = event.currentTarget.data;
}


function handleMouseLeave(event) {
  dataField.innerHTML = ' ';
}

Can someone please help me? Thank you a lot for your attention