React modal window doesn't close

import c from '../Profile.module.css'; 
import { useState } from 'react';
import { createPortal } from 'react-dom';

import Modal from '../Modal/Modal';

const TransactionItem = (props) => {
    const modalRoot = document.querySelector('#root > div');
    const [showModal, setShowModal] = useState(false);
    const short = str => str.substring(str.length - 4) + '...' + str.substring(0, 5);
    
    const handleClose = () => {
        setShowModal(false);
    }

    return (
        <div className={c.transaction_item} onClick={() => setShowModal(true)}>
            <div className={c.transaсtion_data}>
                <div className={c.icon}><span>$</span></div>
                <div className={c.transaction_info}>
                    {props.type === "+" ? 'Пополнение' : 'Перевод'}
                    <div className={c.transaction_where}>{short(props.from)} -&gt; {short(props.to)}</div>
                </div>
            </div>
            <span className={c.transaction_total}>{props.type + props.total}</span>
            {showModal && createPortal(
                <Modal onClose={handleClose} date='23.05.2024 в 09:41' {...props} />,
                modalRoot
            )}
        </div>
    )
} 

export default TransactionItem;

For some reason I can’t close the modal window.
But if you do it like this:

const handleClose = () => {
    setTimeout(() => {
        setShowModal(false);
    }, 0)
}

For some reason the modal window will close
What could this be connected with and are there any other options for solving the problem without the setTimeout crutch?

>Solution :

The modal is contained within this:

<div className={c.transaction_item} onClick={() => setShowModal(true)}>

Presumably the act of closing the modal involves a click event, which is bubbling up to containing elements and ultimately to this event handler.

The reason it works with setTimeout is because that delays the call to setShowModal(false) until after the event has finished processing. So in that case it’s being called immediately after setShowModal(true), whereas without the setTimeout the order is reversed.

Wherever that click event is handled within the modal, call stopPropagation() on the click event. For example, if in the modal you have this:

onClick={onClose}

You would replace it with:

onClick={e => {
  e.stopPropagation();
  onClose();
}}