Modal opens twice when winning condition is met in React quiz game

I’m building a React quiz app where a modal should appear once all answers are correct or when the user loses all the lives. However, the modal opens twice instead of once despite my attempts to control the state. I tried managing the modal display using a state variable showModal. I’ve also attempted adding a flag to control it but the issue persists. What could be causing this issue, and how can I fix it?

const handleModalClose = () => {
  setShowModal(false);
};

const Modal = ({ isOpen, onClose }) => {
  const modalRef = useRef();

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (modalRef.current && !modalRef.current.contains(event.target)) {
        onClose();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [onClose]);

  if (!isOpen) return null;
  if (correctAnswersCount >= 9) {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    });
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" ref={modalRef}>
        {correctAnswersCount > 9 && (
          <h2>Congrats! You've found all the correct answers!</h2>
        )}
        <h3>
          <b>Score</b>
        </h3>

        <div className="answer-progress-container">
          <div className="answer-progress">
            <div
              className="answer-progress-bar"
              style={{ width: `${(correctAnswersCount / 10) * 100}%` }}
            >
              {correctAnswersCount}/10
            </div>
          </div>
          <p className="streak-p">Current Streak: {streakCounter}</p>
        </div>
      </div>
      <button className="modal-close" onClick={onClose}>
        x
      </button>

The part where i call the modal, hope it’s clearer now;

{showModal && (
        <Modal
          isOpen={showModal}
          onClose={handleModalClose}
        />
      )}