Estoy tratando de abrir un modal (que dice si está seguro de que desea eliminar el cliente) cuando un usuario hace clic en el botón para eliminar el cliente. Para abrir el modal, he creado una función openModal , pero no estoy seguro de cómo llamar a esta función, en este código.

ClientList.js

 export default function ListClients() { const [showModal, setShowModal] = useState(); const [userlist, setUserlist] = useState([]); const [selectedID,setSelectedID]=useState(''); function deleteClient() { if(selectedID){ const userParams = { clientName: clientName, country: country, clientid: selectedID, }; axios .delete(process.env + "client", { data: clientParams, }) .then((response) => { setClientlist(clientlist.filter((client) => client.id !== clientId)); }) .catch((error) => { console.log(error); }); } } return( <div> <tbody> {userlist.length > 0 ? ( userlist.map((userlist) => ( <tr key={userlist.id}> <td> <div"> {userlist.id} </div> </td> <td> <button type="button" onClick={() => setSelectedID(userlist.id)}> Delete </button> </td </tr> </tbody> //the idea is to pass the state for modal to show <ModalDelete showModal={showModal} setShowModal={setShowModal} onCancel={()=>setSelectedID('')} onDel={deleteClient}/> </div> );

ModalDelete.js

 export default function ModalDelete({ showModal, setShowModal,onCancel,onDel }) { return( <div> { showModal ? <Transition.Root show={showModal}> <div> <p> Are you sure you want to delete the client?</p> </div> <div> <button type="button" onClick={onDel}>Yes</button> <button type="button" onClick={() => { setShowModal(false); onCancel(); }} > Go Back </button> </div> </Transition.Root> : null } </div> ); }

¿Cómo puedo llamar a la función en este código para abrir el modal cuando se hace clic en el botón eliminado?