JavaScriptでmousemoveイベントを軽くしたい。

前提

マウスカーソルの位置を取得する処理をReactで作っているのですが、
以下のコードだと毎回処理が発生してしまい、かなり重たくなります。

setTimeoutなどを利用して、処理を減らそうとしたのですがなぜか毎回処理が走ります。

js

1const [clickX, setClickX] = useState(0);2const [clickY, setClickY] = useState(0);3 4const frame = document.getElementById('frame');5 6// 処理速度7const fps = 30;8const frameTime = 1000 / fps;9 10const setCursorPlace = (e) => {11 setClickX(e.offsetX);12 setClickY(e.offsetY);13};14 15// マウス移動時16frame.addEventListener('mousemove', (e) => {17 setTimeout(setCursorPlace(e), frameTime);18});19 20return (21 <div id="frame>22 {children}23 </div>24);

実現したいこと

setTimeoutの遅延を実現し、処理を軽くしたい。
また、他にいい方法などがありましたら、教えていただけますと幸いです。