How to deal with a couple of modal windows on a page?

Question

React

Two modal windows should work on the page: one - for creating new data; the second is a confirmation to delete some record.

Problem - when calling to delete a record => a window pops up with the creation of new data

function Modal({ title, display, close, children }) {
    if(!display) {
        return null;
    }

    return (
        <div className="modal" onClick={ close }>
            <div className="content" onClick={event => event.stopPropagation()}>
                <div className="header">
                    <h4 className="title">{ title }</h4>
                    <button className="button" onClick={ close }>Close</button>
                </div>

                <div className="body">{ children }</div>
            </div>
        </div>
    )
}

How do I call each of them in turn? What is in the first case, what is in the second, I call it like this:
onClick={() => setModal(true)

Answer 1

Instead of a boolean, let it be the ID of the window to open:

<button onClick={() => setModal('раз окно')}>1</button>
<button onClick={() => setModal('два окно')}>2</button>
<button onClick={() => setModal('три окно')}>3</button>
...
<Modal display={modal === 'раз окно'}>...</Modal>
<Modal display={modal === 'два окно'}>...</Modal>
<Modal display={modal === 'три окно'}>...</Modal>

Answer 2

Why don't you make your own state for each modal?

const [modalFirst, setModalFirst] = useState(false); 
const [modalSecond setModalSecond] = useState(false);