在使用Click Outside hooks时，如何防止将一个事件侦听器多次分配给一个元素？

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

const useClickOutside = (callback) => {
  const ref = useRef(null);
  const [isAssigned, setIsAssigned] = useState(false);

  const handleClickOutside = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      callback();
    }
  };

  useEffect(() => {
    if (!isAssigned) {
      document.addEventListener('click', handleClickOutside);
      setIsAssigned(true);
    }

    return () => {
      document.removeEventListener('click', handleClickOutside);
      setIsAssigned(false);
    };
  }, [isAssigned]);

  return ref;
};

export default useClickOutside;

import React, { useState } from 'react';
import useClickOutside from './useClickOutside';

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useClickOutside(() => setIsOpen(false));

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && (
        <div ref={ref}>
          {/* Content */}
        </div>
      )}
    </div>
  );
};

export default MyComponent;