如何在reactJS中创建一个自定义钩子，当点击浏览器的后退按钮时，弹出一个确认box.and，取消停留在同一页上？

import { useState, useEffect } from 'react';

const useConfirmLeave = () => {
  const [confirmLeave, setConfirmLeave] = useState(false);

  useEffect(() => {
    const handleBeforeUnload = () => {
      setConfirmLeave(true);
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

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

  useEffect(() => {
    if (confirmLeave) {
      const handleConfirmLeave = (e) => {
        const confirmationMessage = '确定要离开当前页面吗？';
        e.returnValue = confirmationMessage;
        return confirmationMessage;
      };

      window.addEventListener('unload', handleConfirmLeave);

      return () => {
        window.removeEventListener('unload', handleConfirmLeave);
      };
    }
  }, [confirmLeave]);

  return confirmLeave;
};

// 在组件中使用自定义钩子
const MyComponent = () => {
  const confirmLeave = useConfirmLeave();

  return (
    <div>
      {confirmLeave && (
        <div className="confirm-leave-box">
          <p>确定要离开当前页面吗？</p>
          <button onClick={() => window.history.pushState(null, '', window.location.href)}>取消</button>
        </div>
      )}
      <h1>My Component</h1>
      {/* 组件内容 */}
    </div>
  );
};