FullCalendar v5: Rendering a popup to delete an event

Question

I've been using the Full Calendar for my scheduling app and everything works great. So far I have two issues I'm struggling with.

1. Show a pop up modal to confirm the delete of an event
2. Setting the initial start time from 6am, then continue all the way until the end.

Please let me know how can I fix these issues, I have been reading the official documentation but it's taking some time for me to understand all this because I'm very new to this. So any help is appreciated :)

I cannot post the full code as I am using redux saga and a big tech stack, so I am posting only the relevant codes.

imports and the popup modal

import React from 'react'
import { Popconfirm, message } from 'antd'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

const Popup = () => {
  function confirm(e) {
    console.log(e)
    message.success('Click on Yes')
  }

  function cancel(e) {
    console.log(e)
    message.error('Click on No')
  }
  return (
    <Popconfirm
      title="Are you sure to delete this task?"
      onConfirm={confirm}
      onCancel={cancel}
      okText="Yes"
      cancelText="No"
    >
      <a href="#">Delete</a>
    </Popconfirm>
  )
}

the calendar looks like this:

<FullCalendar
  plugins={[timeGridPlugin, dayGridPlugin, interactionPlugin, momentTimezonePlugin]}
  initialView="timeGridWeek"
  headerToolbar={{
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay',
  }}
  editable
  selectable
  selectMirror
  select={(e) => handleEventAdd(e)}
  eventClick={Popup}
  ref={calendarRef}
  events={currentevents}
  eventDrop={handleupdateSchedule}
  eventResize={handleupdateSchedule}
/>

So my issue is when I click the event, I can console log and even use the JS window.alert and then I delete the event. But ii want it to be done from a Pop up, which does not load. I've tried changing z-index but it does not work. I also tried bootstrap modal, still no luck.

But the interesting thing I noticed is when I call the popup function outside the calendar I can see it. Can anyone please explain me what is going on here?

here's the demo of the popup I wanna try:

https://codesandbox.io/s/di6vr