如题，我按照视频中的方法使用Effect Hook，在设定第二个参数为空数组时，ESlint产生了如下编译警告：

Line 59:5:  React Hook useEffect has a missing dependency: 'position.x'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

虽然产生了警告，但还是达到了视频中的效果。请问它是怎么产生的？如何解决？
附组件代码：

import React, { useState, useEffect } from "react";

const MouseTracker: React.FC = () => {
	const [position, setPos] = useState({ x: 0, y: 0 });

	// 组件1的作法显然矫枉过正：我们不需要在每次组件更新时都创建新的订阅，
	// 而是在某个数据源（source prop） 改变时重新创建
	useEffect(() => {
		console.log("A: add effect 添加订阅源", position.x);

		const setMousePos = (e: MouseEvent) => {
			console.log("B: subscribe inner 订阅源事件触发");
			setPos({ x: e.clientX, y: e.clientY });
		};

		document.addEventListener("click", setMousePos);

		return () => {
			console.log("C: remove effect 移除订阅源", position.x);
			document.removeEventListener("click", setMousePos);
		};
		// useEffect的第二个参数是effect所依赖的值数组, 该数组中的数据没更新, 该effect就不会被执行;
        // 这里是空数组, 则该effect只运行一次（仅在组件挂载和卸载时执行）
	}, []);

	console.log("D: before render 组件即将渲染", position.x);

	return (
		<React.Fragment>
			<p>
				X: {position.x}, Y：{position.y}
			</p>
		</React.Fragment>
	);
};

export default MouseTracker;