Javascript contextmenu event'i doğru değerleri dönmüyor.

Bir hook oluşturdum burada contextmenu event'inin içinden pageX ve pageY key'inin değerlerini set etmeye çalışıyorum ama event bana doğru değerleri dönmüyor bu yüzden mouse'ın tıklandığı yerin değerlerini alamıyorum. Bana doğru değer dönmemesinin sebebi nedir?

import { useEffect, useState } from "react";

const useContextMenu = () => {
    const [x, setX] = useState<String>('0');
    const [y, setY] = useState<String>('0');
    const [showContextMenu, setShowContextMenu] = useState<Boolean>(false);

    const clickHandler = () => {
        setShowContextMenu(false);
    }

    const contextMenuHandler = (event: MouseEvent) => {
        event.preventDefault();
        setX(`${event.pageX}px`);
        setY(`${event.pageY}px`);
        setShowContextMenu(true);
    }

    useEffect(() => {
        //mount
        document.addEventListener('click', clickHandler);
        document.addEventListener('contextmenu', contextMenuHandler);
        //unmount
        return () => {
            document.removeEventListener('click', clickHandler);
            document.removeEventListener('contextmenu', contextMenuHandler);
        }
    }, []);

    return { x, y, showContextMenu };
}

export default useContextMenu;

contextMenuHandler fonksiyonunda event.preventDefault() çağrısının yapılması, contextmenu eventinin varsayılan davranışını engelleyecektir. Bu nedenle, pageX ve pageY değerleri doğru bir şekilde ayarlanamayacaktır. Bu davranışın özellikle mobil cihazlar için farklı olabileceğini unutmayın.

Bu sorunu çözmek için, contextMenuHandler fonksiyonunda event.preventDefault() çağrısını kaldırabilirsiniz. Ancak bu durumda, varsayılan davranış (yani sağ tık menüsü) gerçekleşecektir. Eğer bu davranışı engellemek istiyorsanız, event.stopPropagation() çağrısını kullanabilirsiniz. Bu yöntem, event'in hedefe (target) ulaşmasını engelleyecek ve varsayılan davranışı engelleyecektir.

Ayrıca, useState hook'unda x ve y değerlerinin String tipinde tanımlanması da bir soruna neden olabilir. Bunun yerine, number tipinde tanımlayabilirsiniz. Örneğin:

const [x, setX] = useState<number>(0);
const [y, setY] = useState<number>(0);