如何防止在chrome中使用react中的'onbeforeunload‘事件进行双重确认

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

function MyComponent() {
  const [showConfirmation, setShowConfirmation] = useState(false);

  useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();
      event.returnValue = '';
      setShowConfirmation(true);
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  const handleConfirmation = (confirmed) => {
    setShowConfirmation(false);

    if (confirmed) {
      // 执行确认离开页面的操作
    } else {
      // 取消离开页面的操作
    }
  };

  return (
    <div>
      {showConfirmation ? (
        <div>
          <p>确定要离开页面吗？</p>
          <button onClick={() => handleConfirmation(true)}>确认</button>
          <button onClick={() => handleConfirmation(false)}>取消</button>
        </div>
      ) : null}
      {/* 其他组件内容 */}
    </div>
  );
}

export default MyComponent;