UPDATE: changed some text below after reviewing your image attached.
Hi there, I'm Matt Sergei (do call me Matt, please) and can help you -
Your attached image has IDs there - for each hexagon - but with numbered scheme. Each hexagon does include the UK region data attribute yet this isn't helping with geolocations.
I still believe that it would be better to start with geolocation compatible map first, turn it into hexagons and then attach proper IDs (since geolocations of cities you want to "fit" into hexagons will be known).
Yes, with scripting, not manual work that would produce errors.
You also have to be clear if combining several shapes to be clickable as one "unit" involves adding SVG G (group) elements. So your map script will need to distinguish PATH from G interactions (mouse hover/click).
Otherwise I'm a webmaster and developer for 27 years, one of top SVG, D3.js, GSAP and Leaflet developers here. For mapping I use mainly Mapplic plugin (beside Leaflet) though other javascript libraries are also possible (like MapSVG and AmCharts in your case).
Regards,
Matt