React中使用Scandit SDK实现首次相机权限阻止检测的问题求助

大家好，我在使用scandit-sdk-react开发相机扫描功能时碰到了一个权限检测的小问题，卡了好一会儿，想请大家帮忙看看。

我的需求场景 #

当我打开扫描器组件时，浏览器会弹出相机权限的允许/阻止弹窗，我想要实现的是：如果用户第一次就点击“阻止”权限请求，能立刻触发我自定义的“相机权限被拒绝”弹窗。

当前遇到的问题 #

我现在实现的逻辑只能在第二次打开扫描器时检测到权限被拒绝：

• 第一次打开扫描器，选择“阻止”权限，自定义弹窗不会出现；
• 关闭扫描器后再次打开，才能检测到权限已被拒绝，弹出自定义弹窗。

我目前的代码实现 #

我是通过navigator.permissions.query来检测相机权限状态，代码如下：

const [cameraDenied, setCameraDenied] = useState(false);

const checkCameraDenied = async () => {
  try {
    const PermissionStatus = await navigator.permissions.query({
      name: "camera",
    });
    if (PermissionStatus.state === "denied") {
      setCameraDenied(true);
    }
  } catch (error) {
    console.log(error);
  }
};

useEffect(() => {
  checkCameraDenied();
}, []);

return (
  <>
    {cameraDenied && (
      <Modal type="cameraDenied" setShowModal={closeScanner} />
    )}
  </>
)

目前的逻辑是组件挂载时执行一次权限检测，但显然第一次用户选择阻止后，这次检测已经完成了，没法实时更新状态。我也在想是不是应该监听权限状态的变化，或者Scandit SDK本身有没有提供权限相关的回调事件？

期待大家的指点，谢谢！

备注：内容来源于stack exchange，提问作者Muhammad Haekal