dynamic import next.js for implementing modal dialog - reactjs

Question

I have created a modal dialog component with a function toggleModal() which toggles the dialog.
I need to import this component and trigger toggleModal() from the parent component.
Bellow the component code to be dynamically imported:
import { useState, useEffect, useContext } from 'react'
const Modal = (props) => {
const [IsModalOpen, setIsModalOpen] = useState(true)
const toggleModal = () => {
setIsModalOpen(!IsModalOpen)
}
return(
<div className="fixed z-10 inset-0 overflow-y-auto">
<div className="flex">
<span className="hidden"></span>​
<div ref={ref} className="inline-block" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div className="mt-3">
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
Deactivate account
</h3>
<div className="mt-2">
<p className="text-sm leading-5 text-gray-500">
Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.
</p>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span className="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button type="button" className="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Deactivate
</button>
</span>
<span className="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
<button onClick={() => toggleModal()} type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</div>
</div>
</div>
</div>
)
}
export default Modal
Here I import the component:
import { useState, useEffect } from 'react'
import dynamic from 'next/dynamic'
const Event = (props) => {
const {eventKey} = props
const [eventData, setEventData] = useState(null)
const [showModal, setshowModal] = useState(false)
const Modal = dynamic(() => import('./Modal'))
const openModal = () => {
setshowModal(true)
}
return (
eventData &&
<div className="max-w-sm rounded overflow-hidden shadow-lg m-3 sm:m-3 md:m-4 lg:m-6 ">
<img className="w-full" src={eventData.img} alt="Sunset in the mountains" />
<div className="px-6 py-4">
<div className="font-bold text-xl mb-2">{eventData.title}</div>
<div className="font-medium text-xs mb-2 text-gray-500">De {eventData.start} a {eventData.end}</div>
<p className="text-gray-700 text-base">
{eventData.desc}
</p>
</div>
<div className="px-6 pt-4 pb-2">
<span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-xs font-semibold text-gray-500 mr-2 mb-2">#Yoga</span>
<span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-500 mr-2 mb-2">#winter</span>
<button onClick={() => openModal()} className="bg-indigo-600 hover:bg-indigo-500 text-xs font-medium text-white py-1 px-2 rounded-full">Recordarme</button>
</div>
{showModal && <Modal />}
</div>
)
}
export default Event
How can I import the component and trigger toggleModal() to display the modal dialog?