From 0ea5ce2322d791602559422a9ef7603c76de598e Mon Sep 17 00:00:00 2001
From: eloicasamayor <37459666+eloicasamayor@users.noreply.github.com>
Date: Sun, 22 Dec 2024 21:09:47 +0100
Subject: [PATCH] fix ts err for the deploy

---
 src/assets/Map.tsx             |  2 +-
 src/components/MapControls.tsx | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/assets/Map.tsx b/src/assets/Map.tsx
index 14e8625..b54bc0f 100644
--- a/src/assets/Map.tsx
+++ b/src/assets/Map.tsx
@@ -53,7 +53,7 @@ export const Map = ({
               onZoomWithButtons={onZoomWithButtons}
               zoomToElement={zoomToElement}
               selectedCountry={selectedCountry}
-              wrapperRef={mapRef}
+              mapRef={mapRef}
             />
             <TransformComponent>
               <svg
diff --git a/src/components/MapControls.tsx b/src/components/MapControls.tsx
index 0a4585d..a23c2f5 100644
--- a/src/components/MapControls.tsx
+++ b/src/components/MapControls.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { ReactZoomPanPinchRef, useControls } from "react-zoom-pan-pinch";
+import { useControls } from "react-zoom-pan-pinch";
 
 type MapControlsProps = {
   isMaxScale: boolean;
@@ -7,7 +7,7 @@ type MapControlsProps = {
   onZoomWithButtons: Function;
   zoomToElement: Function;
   selectedCountry: string;
-  wrapperRef: React.Ref<ReactZoomPanPinchRef>;
+  mapRef: React.RefObject<HTMLElement>;
 };
 
 export const MapControls = ({
@@ -16,15 +16,17 @@ export const MapControls = ({
   onZoomWithButtons,
   zoomToElement,
   selectedCountry,
-  wrapperRef,
+  mapRef,
 }: MapControlsProps) => {
   const { zoomIn, zoomOut /* resetTransform */ } = useControls();
   useEffect(() => {
-    const countryPath = wrapperRef?.current?.querySelector(
-      `[title="${selectedCountry}"]`
-    );
-    zoomToElement(countryPath);
-    //(node: HTMLElement | string, scale?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
+    let countryPath;
+    if (mapRef?.current) {
+      countryPath = mapRef?.current?.querySelector(
+        `[title="${selectedCountry}"]`
+      );
+      zoomToElement(countryPath);
+    }
   }, [selectedCountry]);
   return (
     <div className="tools">