feat: add overview image interactive layer

Goal:

Make overview image modal interactive.

Give user ability to click on the overview image and then a) show other overview image b) show map and zoom to some point

What has been done:

• clickable elements on the overview image, scaled to container size
• tests

src/components/FunctionalArea/Modal/OverviewImagesModal/OverviewImagesModal.component.tsx

 /* eslint-disable @next/next/no-img-element */
 import * as React from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 import { useOverviewImage } from './utils/useOverviewImage';
 
 export const OverviewImagesModal: React.FC = () => {
   const [containerRect, setContainerRect] = useState<DOMRect>();
   const { imageUrl, size, linkConfigs } = useOverviewImage({ containerRect });
   const { width, height } = size;
+  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(null);
 
-  const handleRect = useCallback((node: HTMLDivElement | null) => {
-    if (!node) {
-      return;
+  const handleContainerRef = useCallback((node: HTMLDivElement | null) => {
+    if (node !== null) {
+      setContainerRect(node.getBoundingClientRect());
+      setContainerNode(node);
     }
-
-    setContainerRect(node.getBoundingClientRect());
   }, []);
 
+  useLayoutEffect(() => {
+    const updateContainerSize = (): void => {
+      if (containerNode !== null) {
+        setContainerRect(containerNode.getBoundingClientRect());
+      }
+    };
+
+    window.addEventListener('resize', updateContainerSize);
+    return () => window.removeEventListener('resize', updateContainerSize);
+  }, [containerNode]);
+
   if (!imageUrl) {
     return null;
   }
@@ -24,7 +35,7 @@ export const OverviewImagesModal: React.FC = () => {
     <div
       data-testid="overview-images-modal"
       className="flex h-full w-full items-center justify-center bg-white"
-      ref={handleRect}
+      ref={handleContainerRef}
     >
       <div className="relative" style={{ width, height }}>
         <img alt="overview" className="block h-full w-full" src={imageUrl} />