I have 2 dialog boxes in my website for processing payment. When the user clicks on the “Location button”, the first dialog for entering information payment is rendered and the state equals 1. When the user clicks the “Continuer button” of the first dialog, I want the second dialog box to be rendered, the first dialog to disappear and the state to change immediately and to equal to 2. But instead of that, I have got 2 dialog boxes showing one in top of another and the state doesn’t change immediately and is still 1. I searched for a solution for 2 days but didn’t find anything that could help me. You will find screenshots of the problem and the code that is related too below. HEEELP !!!!

'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import './paymentModal.scss';

function PaymentModal({ setIsOpen }) {
  const [firstPart, setFirstPart] = useState(1);

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleClick = () => {
    // console.log("Beginning of the method : " + firstPart)

    firstPart === 1 && setFirstPart(2);

    const startTransaction = () => {
      setIsOpen(false);
      // console.log('Paiement éffectué avec succès !');
    };

    firstPart === 2 && startTransaction();

    // console.log("End of the method : " + firstPart)
  };

  return (
    <div className="popup-container">
      <motion.div
         className="popup-box"
         initial={{ opacity: 0, scale: 0.5 }}
         whileInView={{ opacity: 1, scale: 1 }}
         transition={{ duration: 0.5 }}
      >
         <h3>Paiement</h3>
         {firstPart === 1 ? (
            <form>
            <input type="text" required placeholder="Nom complet" name="name" />
            <input type="email" required placeholder="Email" name="email" />
            <input
               type="phone"
               required
               placeholder="Numéro de Tél"
               name="subject"
            />
            <div className="radioButtons">
               <div className="categorie">
                  <input
                     type="radio"
                     name="categorie"
                     value="waafi"
                     id="website"
                  />
                  <label htmlFor="website">WAAFI</label>
               </div>
               <div className="categorie">
                  <input
                     type="radio"
                     name="categorie"
                     value="dmoney"
                     id="mobile"
                  />
                  <label htmlFor="mobile">D-Money</label>
               </div>
            </div>
            <input
               type="text"
               required
               placeholder="Nom associé au compte de paiement"
               name="name"
            />
            <input
               type="text"
               required
               placeholder="Numéro ou identifiant associé au compte de paiement"
               name="name"
            />
        </form>
        ) : (
          <p>
             <strong>Félicitation pour le choix du progrès !</strong> <br />
             Nous vous enverrons un e-mail de confirmation lorsque nous recevrons
             votre paiement. Veuillez nous faire parvenir le montant sur le
             compte : <br />
             <br />
             <strong>WAAFI :</strong> Fathi Ahmed Nour - 77.86.00.64
             <br />
             <br />
             <strong>D-Money :</strong> Fathi Ahmed Nour - 77.86.00.64
             <br />
          </p>
       )}
       <div className="buttons">
          <button className="close-btn" onClick={handleClose}>
             Quitter
          </button>
          <button className="next-btn" onClick={handleClick}>
             Continuer
          </button>
       </div>
    </motion.div>
 </div>
);

}

export default PaymentModal;