Merhaba useRef ile divin içindeki elemanların id bilgilerine erişip id bilgilerine göre işlem yaptırmak istiyorum. Bunun için şöyle bir kod yazdım.

const ref = useRef(null);
const list = ref.current?.children;

burada ref tanımladım ve div içindeki elemanları list adında bir değişkene aktardım.
Sonrasında bir for döngüsü oluşturdum.

 for (const e of list) {
    if (e.id === "Basin") {
        console.log("Basın divi")
    }
    if (e.id === "AltKat") {
        console.log("Alt Kat divi")
    }
  }

Sonrasında her alt elemente onMouseEnter ve onMouseLeave olarak ekleme yaptım.

 <g
    id="AltKat"
    onMouseEnter={handleHover} onMouseLeave={handleHover}
    style={{
        cursor: "pointer",
    }}
 >

Amacım idsi Basın ya da AltKat olan divin üzerine geldiğimde sadece o id ye ait olan elementin rengi değişmesi.
Fakat AltKat veya Basın idsine sahip olan elementlerin üzerine geldiğimde hem "Basın Divi" hem de "AltKat Divi" yazıyor. Bunu nasıl çözebilirim?

Burda gri olan yerin idsi Basin; 114,115,116,117,102 ve 125 yazan yerler ise AltKat idsine sahip.

Loglarım ise böyle