마우스 커서 클릭 질문드립니다 채택완료

저만의 마우스 커서를 만들고 싶어서 css로 설정중인데요 

    const cursor = document.querySelector(".custom_cursor");

    document.addEventListener("mousemove", (e) => {

        var x = e.clientX;

        var y = e.clientY;

        cursor.style.left = x + "px";

        cursor.style.top =  y + "px";

    })

.custom_cursor{

    z-index: 9999999;

    position: absolute;

    top: 50%;

    left: 50%;

    width: 30px;

    height: 30px;

    cursor: none;

    pointer-events: unset;

    border-radius: 50%;

    background: red;

    transform: translate(-50%, -50%);

}

이렇게 설정했는데 페이지에 잘 나오기는 합니다만 클릭이 막혀서 작동하지 않습니다 ㅠㅠ

z-index를 -1로 하면 다른 z-index 9999 설정한것들 때문에 가려지게 됩니다 ㅠㅠ

무엇이 문제인지 도움 부탁드립니다