preactのonMouseMoveでマウス座標をとると

ちょっと事情があってマウス座標が欲しかったのです。

import { render } from 'preact'
import { useCallback, useState } from 'preact/hooks'

function App() {
    let a = 0
    const [mousePoint, setMousePoint] = useState<[number, number]>([0, 0])

    const track = useCallback((e: MouseEvent) => {
        if (mousePoint[0] == e.clientX && mousePoint[1] == e.clientY) {
            return;
        }
        console.log(mousePoint, a++)
        setMousePoint([e.clientX, e.clientY])
    }, [setMousePoint]);

    return <div style={{ width: "500px", height: "500px" }} onMouseMove={track}>
        ああああ
    </div>
}
render(<App />, document.getElementById('app')!)

a=23あたりでかならず、

promise) Error: Too many re-renders. This is limited to prevent an infinite loop which may lock up your browser. The component causing this is: App

とレンダリングがこけてしまう。なんでにょ〜。