upd

src/components/MainMark.tsx

@@ -60,7 +60,9 @@ const MainMark = ({
             width="32"
             height="64"
             fill="white"
-            className="transition-all duration-150 ease-in-out w-0 group-hover:w-8"
+            className={`transition-all duration-150 ${
+              hoveredMark === mark.id ? "delay-100" : ""
+            }  ease-in-out w-0 group-hover:w-8`}
           ></rect>
           <rect
             x={width / 2}
@@ -78,8 +80,10 @@ const MainMark = ({
             }}
           ></rect>
           <text
-            className={`opacity-0 group-hover:opacity-100  pointer-events-none           
-               transition-opacity duration-300 ease-in-out`}
+            className={`${
+              hoveredMark === mark.id ? "" : "delay-150"
+            } opacity-0 group-hover:opacity-100 duration-200 pointer-events-none           
+               transition-opacity ease-in-out`}
             ref={textRef}
             x="78"
             y="39"

src/components/Mark.tsx

@@ -42,7 +42,7 @@ const Mark = ({
     <svg
       onMouseEnter={handleOnMouseEnter}
       onMouseLeave={handleOnMouseLeave}
-      className={`transition-all absolute ease-in-out  duration-300 group ${
+      className={`transition-all absolute ease-in-out duration-300 group ${
         isFiltered
           ? "opacity-100 cursor-pointer"
           : "opacity-0 pointer-events-none"