I am using dangerouslySetInnerHTML as a last resort as I cannot get my script to work. It needs to be in this format in order for the plugin to appear on the frontend, otherwise the console says that ImageMapPro is undefined.

'use client'
import { useEffect, useState } from "react";

export default function ImageMapPro() {
const [render, setRender] = useState(false);
const script = <div id="image-map-pro"></div> <script src="image-map-pro/image-map-pro.min.js"></script> <script>ImageMapPro.init('#image-map-pro', {"id":"5256f3ec-3b42-4614-bd33-7332a713cac7","artboards":[{"children":[{"id":"27b1e6ba-0de4-49a0-a732-0d6824f84d17","title":"Ellipse","type":"oval","x":9.433962264150944,"y":32.239583333333336,"width":50.35377358490566,"height":54.583333333333336,"default_style":{"background_color":"#ff0000"},"x_image_background":9.433962264150944,"y_image_background":32.239583333333336},{"id":"1e6ab53b-a4c2-4a2f-a2fd-6fa8df37c642","title":"Rect","type":"rect","x":22.995283018867923,"y":18.90625,"width":61.910377358490564,"height":55,"tooltip_content":[{"type":"Heading","text":"test","heading":"h3","other":{"id":"","classes":"","css":""},"style":{"fontFamily":"sans-serif","fontSize":20.8,"lineHeight":"normal","color":"#ffffff","textAlign":"left"},"boxModel":{"width":"auto","height":"auto","margin":{"top":0,"bottom":0,"left":0,"right":0},"padding":{"top":10,"bottom":10,"left":10,"right":10}},"id":"ffbed5ee-255b-41a6-8229-c3f6f693497b"}],"x_image_background":22.995283018867923,"y_image_background":18.90625}]}],"version":"6.0.8","general":{"name":"Untitled"}})</script>
useEffect(() => {
setRender(true);
}, []);

return (
<div dangerouslySetInnerHTML={{ __html: script }}></div>
);
}

Error message : app-index.js:31 Warning: Prop dangerouslySetInnerHTML did not match. Server: "\n <div id="image-map-pro" data-image-map-id="5256f3ec...