From e677089ff9e42fa3452b438ec5dc52bfb7f2b968 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 18 Jun 2026 23:41:09 +0200
Subject: [PATCH] fix(map): use useRef for hover timeout to prevent flyout
 flicker and immediate disappearance

---
 components/blocks/InteractiveGermanyMap.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/blocks/InteractiveGermanyMap.tsx b/components/blocks/InteractiveGermanyMap.tsx
index 0ffd8021f..8a0f74259 100644
--- a/components/blocks/InteractiveGermanyMap.tsx
+++ b/components/blocks/InteractiveGermanyMap.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { MapPin, Factory, Zap, CheckCircle2, ArrowUpRight } from 'lucide-react';
 import Image from 'next/image';
@@ -38,10 +38,13 @@ export function InteractiveGermanyMap({
   hideStandorte = false
 }: InteractiveGermanyMapProps) {
   const [activeLocation, setActiveLocation] = useState<Location | null>(null);
-  const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>(null);
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleMouseEnter = (loc: Location) => {
-    if (hoverTimeout) clearTimeout(hoverTimeout);
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
     setActiveLocation(loc);
   };
 
@@ -49,7 +52,7 @@ export function InteractiveGermanyMap({
     const timeout = setTimeout(() => {
       setActiveLocation(null);
     }, 200);
-    setHoverTimeout(timeout);
+    hoverTimeoutRef.current = timeout;
   };
 
   const router = useRouter();