I'm trying to get hover effect on the SVG LINE but it dosen't work. So I'm currently just trying to get a simple cursor pointer style on the line to actually check if anything works at all. But the cursor pointer dosen't work either.The blue is the svg and the red-ish line is the SVG LINE element. So as you can see there are no overlapping.

Does anyone have an idea on why hover effects or cursor pointers dosen't work on SVG LINE?

return (
        <>
            <svg width="100%" height="100%" style={{position:'absolute', top:0, left:0, background:'blue'}}>
                {lines.filter(line => line.page === pageNumber).map((line, idx) => (
                    <line key={idx}
                          x1={line.x1}
                          y1={line.y1}
                          x2={line.x2}
                          y2={line.y2}
                          stroke={hovered === idx ? "rgba(255, 0, 0, 0.6)" : markingColor}
                          strokeWidth={14}
                          style={{transition: 'stroke 0.1s ease', cursor:'pointer', position: 'absolute'}}
                    />
                ))}
            </svg>

        </>
    );