Try to fix image mapper problem

site/components/common/HomePage/PolygonModal/PolygonModal.tsx

@@ -9,7 +9,7 @@ import {
 import decadesManifest from '../../../../static_data/decadesManifest.json'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
-import ImageMapper from 'react-img-mapper'
+import ImageMapper from 'reactjs-img-mapper'
 import Image from 'next/image'
 
 export default function MarkerCardModal(props: {

site/components/product/ProductCard/ProductCard.tsx

@@ -39,6 +39,7 @@ const ProductCard: FC<Props> = ({
 
   const [isHover, setIsHover] = useState(false)
   const hoverCardBgColor = useColorModeValue('white', 'gray.800')
+  const fontColor = useColorModeValue("black", "black");
 
   return (
     <Link href={`/product/${product.slug}`}>
@@ -152,11 +153,11 @@ const ProductCard: FC<Props> = ({
                 )}
               </div>
               <Stack backgroundColor={"white"} pt={10} align={'center'}>
-                  <Heading fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
+                  <Heading color={fontColor} fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
                     {product.name}
                   </Heading>
                   <Stack direction={'row'} align={'center'}>
-                    <Text fontWeight={800} fontSize={'xl'}>
+                    <Text color={fontColor} fontWeight={800} fontSize={'xl'}>
                     {`${price} ${product.price?.currencyCode}`}
                     </Text>
                   </Stack>

site/package.json

@@ -56,6 +56,7 @@
     "react-merge-refs": "^2.0.1",
     "react-slick": "^0.29.0",
     "react-use-measure": "^2.1.1",
+    "reactjs-img-mapper": "^1.0.3",
     "screenfull": "^6.0.2",
     "tabbable": "^5.2.1",
     "tailwindcss": "^3.0.13",

site/pages/index.tsx

@@ -15,9 +15,7 @@ export default function Home() {
 
   const { isOpen, onOpen, onClose } = useDisclosure()
 
-  const mapDefinition = {
-    name: 'my-map',
-    areas: [
+  const mapAreas = [
       {
         id: '12',
         title: '2000',
@@ -58,8 +56,7 @@ export default function Home() {
         shape: 'poly',
         href: '#',
       },
-    ],
-  }
+    ]
 
   useEffect(() => {
     // Handler to call on window resize
@@ -82,8 +79,6 @@ export default function Home() {
       <section id="mapContainer" className="w-full">
         <div>
           <ImageMapper
-            natural
-            stayHighlighted
             onClick={(area) => {
               setDecadeClicked(area.id!)
               onOpen()
@@ -91,7 +86,7 @@ export default function Home() {
             parentWidth={mapContainerWidth}
             responsive={true}
             src={imagePath}
-            map={mapDefinition}
+            map={{ name: "my-map", areas: mapAreas }}
           ></ImageMapper>
           <PolygonModal
             key={decadeClicked}